vue.js selectした情報とv-modelの値が一致してない

Question

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を更新するにはどうすればよいでしょうか。

Answer 1

おそらく直接的な要因は v-for で繰り返し生成している <option> タグに同一の key を設定していることかと思います。

以下の修正で直るのではないでしょうか。

return {
  options [{ id: 1, name: 'student' },{ id: 2 /* ←修正 */, name: 'manager' }]
  selected: "student",
};

以下は pug の文法に自信がないので的外れかもしれません。

option タグの子要素に <p> タグを入れているように見えますが、option の子要素にはエスケープされた文字以外許可されていない ため、ブラウザによっては適切に動作しないかと思います。

Comments

[Kimsehwa]

回答ありがとうございます。idは2でも駄目でした。。

なるほど、知らなかったです。pタグ外すようにします。