vue.jsでリストにセレクトボックスとテキストボックスを使う場合の挙動

vue.jsを利用して、セレクトボックスとテキストボックスが存在するリストを出力しています。

添付のgifのように、右の初期値からテキストボックスを変更した後に、左側のセレクトボックスを変更するとテキストボックスの値が初期値に戻ってしまいます。

これは仕方がないことなのでしょうか？

selectボックスにv-modelを使ってバインドしているためかとは思いますが、
代替案などはございますでしょうか？

プログラム全文を下記に載せます。

  <div id="app">
	<div v-for="item in items">
		<select v-model="item.webs_id" name="web[]">
			<option v-for="web in webs" v-bind:value="web.id">
			{{ web.name }}
			</option>
		</select>
		<input type="text" name="name[]" v-bind:value="item.title">
	</div>
	<hr>
    <!--Title: <input v-model="addTitle"><br />-->
    <button v-on:click="add">add</button><br />
  </div>
 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var example1 = new Vue({
      el: '#app',
      data: {
        items: [
          { title: 'memo1', webs_id: 1 },
          { title: 'memo2', webs_id: 2 }
        ],
        webs: [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo!'}
        ],
      },
  
      methods: {
        add: function (event) {
          this.items.push({ title: null, webs_id: 1 })
        }
      }
    })
  </script>

ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

おそらく、発生している現象にセレクトボックスは関係ありません。
その証拠に、テキスト内容を変更した後 add ボタンを押しても、やはりテキストボックスの内容は初期化されます。

ひょっとして v-bind と v-model を間違えていませんか？　もしそうなら、その誤りによって発生している現象です。

より正確には、テキストボックスの value に item.title をバインドしてしまっていることが原因です。
Vue が保持している仮想 DOM 上では、１番目のテキストボックスの value プロパティは常に "memo1" に、２番目のテキストボックスの value プロパティは "memo2" になっているはずです。

テキストボックスに別の文字を入力すると、表面上 value プロパティが変わったように見えますが、テキストボックスの value プロパティは items[i].title にバインドされており、提示されたコードにはこの値を変更する処理が記述されていないため、次に Vue インスタンスがHTMLElement を更新するタイミングで画面上の値も元の memo? に戻されてしまいます。

提示いただいたコードからは質問者様がどうしたいのか酌み取れなかったので代案をお示しすることはできませんが、原因としてはこんなところです。

おそらくご質問者様は Vue の動作について(JavaScript の動作について？ )複数の勘違いがあるように思います。

私がこのように感じるのは以下の点が原因です。

items と webs に何らかの関連を持たせる意図がありそうだが、これらを関連付けるコードが見当たらない
add ボタンで、items 配列に追加している値が、既に格納されている値と全くの別物 (items 配列には title や web プロパティを持ったオブジェクトが格納されているのに、突如 id プロパティのみを持ったオブジェクトを追加している。これは webs 配列に追加したい値に見える )

投稿2019/01/15 13:48

R.Mizukami

総合スコア1086

tatsuya_guchi

2019/01/15 14:35

ご指摘ありがとうございます。 >add ボタンで、items 配列に追加している値が、既に格納されている値と全くの別物 (items 配列には title や web プロパティを持ったオブジェクトが格納されているのに、突如 id プロパティのみを持ったオブジェクトを追加している。これは webs 配列に追加したい値に見える ) こちらについてですが、ご指摘の通りです。いったん事情を説明したかったので、追加時の配列の中身を適当に書いていました。上記、修正しました。 >items と webs に何らかの関連を持たせる意図がありそうだが、これらを関連付けるコードが見当たらない itemsのwebs_idがwebsのidに紐づきます。websがマスタでセレクトボックスの中身です。itemsがリストのイメージです。itemsのwebs_idでwebsの初期値を設定しています。ちなみに >その証拠に、テキスト内容を変更した後 add ボタンを押しても、やはりテキストボックスの内容は初期化されます。こちら現象も確認済みです。もしこのような動作をする場合で、テキストボックスの内容が初期化されないようにしたい場合は、やvue.jsを使用しない方が良いでしょうか？