import selectType from "../src/components/selectType.vue"; document.addEventListener("DOMContentLoaded", e => { new Vue({ el: "#root", components: { "select-type": selectType } }); });
selectType.vue
<template lang="pug"> .select select(v-model="selected" :name="inputName" @change="changeType") option(v-for="option in options" :value="option.name", :key="option.id") p {{option.name}} h1 {{ selected }} </template> <script> data() { return { options [{ id: 1, name: 'student' },{ id: 2, name: 'manager' }] selected: "student", }; }, methods: { changeType(e) { this.selected = e.target.value; } } </script>
上記コードは
初回studentが選択されているセレクトフォームを表示してます。
この実装のためv-modelのselectedに初期値"student"を入れました。
そこからmanagerにセレクトフォームを変更して
ブラウザの前のページにボタンを押して以前のページに移動してから次のページを押して戻すと
セレクトフォームはmanagerのままですが、
v-modelの値はstudentです。
studentなのはおそらくdataの初期値を見てると思います。
ページを遷移しても選択された内容が変わらないのはブラウザの仕様だと思いますが、
この仕様に合わせてv-modelを更新するにはどうすればよいでしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/08 12:57