Vue.js v2.1.10 環境です。
下記の条件を満たすフロントの実装を行いたくコーディングを行いました。
- fromsはセレクトボックスの選択肢が格納される
- savedは保存した値が格納されており初期表示に一致するチェックボックスが選択済みで表示される
- +クリック時fromsのセレクトボックスが追加される
- listCountはセレクトボックスの追加操作で利用することを前提としており、画面初期表示時はsaved.lengthの値と同値
しかしながら下記のコーディングではsavedに値が入っていると3が動作しません。
ちなみにv-ifの "saved[key].from == from.name" を 削除するとsavedに値が入っていないと3が動作しなくなってしまいます。
listCountのインクリメントとkeyの部分が駄目なような気がしているのですが、回避できませんでした。
上記の4つの条件を同時に満たす方法をご教示頂ければ幸いです。
html
1<ul id=list> 2 <li v-for="(n,key) in listCount"> 3 <select> 4 <option selected v-for="from in froms" v-if="saved.length >= 1 && saved[key].from == from.name">{{from.name}}</option> 5 <option v-else>{{from.name}}</option> 6 </select> 7 </li> 8 <li> 9 <input type="button" value="+" @click="listCount += 1"> 10 </li> 11</ul>
javascript
1const list = new Vue({ 2 el: '#list', 3 data: { 4 froms: [{"name":"AAA"},{"name":"BBB"},{"name":"CCC"},{"name":"DDD"}], 5 saved: [{"from":"BBB"},{"from":"CCC"}], 6 listCount: 2 7 } 8});
BAを転記します。
html
1<ul id=list> 2 <li v-for="(sv, i) in saved"> 3 <select v-model="saved[i]"> 4 <option v-for="from in froms">{{from}}</option> 5 </select> 6 </li> 7 <li> 8 <input type="button" value="+" @click="addNewSaved"> 9 </li> 10</ul>
javascript
1const list = new Vue({ 2 el: '#list', 3 data: { 4 froms: ["AAA", "BBB", "CCC", "DDD"], 5 saved: ["BBB","CCC"] 6 }, 7 methods: { 8 addNewSaved: function () { 9 this.saved.push(this.froms[0]); 10 } 11 } 12});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/25 13:53
2017/02/25 19:08
2017/02/26 06:35