質問編集履歴
3
BAの転記
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -35,4 +35,36 @@ | |
| 35 35 | 
             
                listCount: 2
         | 
| 36 36 | 
             
              }
         | 
| 37 37 | 
             
            });
         | 
| 38 | 
            +
            ```
         | 
| 39 | 
            +
             | 
| 40 | 
            +
             | 
| 41 | 
            +
             | 
| 42 | 
            +
            BAを転記します。
         | 
| 43 | 
            +
             | 
| 44 | 
            +
            ```html
         | 
| 45 | 
            +
            <ul id=list>
         | 
| 46 | 
            +
              <li v-for="(sv, i) in saved">
         | 
| 47 | 
            +
                <select v-model="saved[i]">
         | 
| 48 | 
            +
                  <option v-for="from in froms">{{from}}</option>
         | 
| 49 | 
            +
                </select>
         | 
| 50 | 
            +
              </li>
         | 
| 51 | 
            +
              <li>
         | 
| 52 | 
            +
                <input type="button" value="+" @click="addNewSaved">
         | 
| 53 | 
            +
              </li>
         | 
| 54 | 
            +
            </ul>
         | 
| 55 | 
            +
            ```
         | 
| 56 | 
            +
             | 
| 57 | 
            +
            ```javascript
         | 
| 58 | 
            +
            const list = new Vue({
         | 
| 59 | 
            +
              el: '#list',
         | 
| 60 | 
            +
              data: {
         | 
| 61 | 
            +
                froms: ["AAA", "BBB", "CCC", "DDD"],
         | 
| 62 | 
            +
                saved: ["BBB","CCC"]
         | 
| 63 | 
            +
              },
         | 
| 64 | 
            +
              methods: {
         | 
| 65 | 
            +
                addNewSaved: function () {
         | 
| 66 | 
            +
                  this.saved.push(this.froms[0]);
         | 
| 67 | 
            +
                }
         | 
| 68 | 
            +
              }
         | 
| 69 | 
            +
            });
         | 
| 38 70 | 
             
            ```
         | 
2
環境情報追加
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -1,3 +1,5 @@ | |
| 1 | 
            +
            Vue.js v2.1.10 環境です。
         | 
| 2 | 
            +
             | 
| 1 3 | 
             
            下記の条件を満たすフロントの実装を行いたくコーディングを行いました。
         | 
| 2 4 |  | 
| 3 5 | 
             
            1. fromsはセレクトボックスの選択肢が格納される
         | 
1
htmlをシンプルに変更。jsをより多様なケースに対応できるために変更。
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -13,14 +13,12 @@ | |
| 13 13 |  | 
| 14 14 | 
             
            ```html
         | 
| 15 15 | 
             
            <ul id=list>
         | 
| 16 | 
            -
              < | 
| 16 | 
            +
              <li v-for="(n,key) in listCount">
         | 
| 17 | 
            -
                <li>
         | 
| 18 | 
            -
             | 
| 17 | 
            +
                <select>
         | 
| 19 | 
            -
             | 
| 18 | 
            +
                  <option selected v-for="from in froms" v-if="saved.length >= 1 && saved[key].from == from.name">{{from.name}}</option>
         | 
| 20 | 
            -
             | 
| 19 | 
            +
                  <option v-else>{{from.name}}</option>
         | 
| 21 | 
            -
             | 
| 20 | 
            +
                </select>
         | 
| 22 | 
            -
             | 
| 21 | 
            +
              </li>
         | 
| 23 | 
            -
              </div>
         | 
| 24 22 | 
             
              <li>
         | 
| 25 23 | 
             
                <input type="button" value="+" @click="listCount += 1">
         | 
| 26 24 | 
             
              </li>
         | 
| @@ -30,9 +28,9 @@ | |
| 30 28 | 
             
            const list = new Vue({
         | 
| 31 29 | 
             
              el: '#list',
         | 
| 32 30 | 
             
              data: {
         | 
| 33 | 
            -
                froms: [{"name":"AAA"},{"name":"BBB"}{"name":"CCC"},{"name":"DDD"}] | 
| 31 | 
            +
                froms: [{"name":"AAA"},{"name":"BBB"},{"name":"CCC"},{"name":"DDD"}],
         | 
| 34 | 
            -
                saved: [{"from":"BBB"}],
         | 
| 32 | 
            +
                saved: [{"from":"BBB"},{"from":"CCC"}],
         | 
| 35 | 
            -
                listCount:  | 
| 33 | 
            +
                listCount: 2
         | 
| 36 34 | 
             
              }
         | 
| 37 35 | 
             
            });
         | 
| 38 36 | 
             
            ```
         | 
