vuejsのインライン編集で選択ボックスのオプション呼び出しの問題

Question

良い日、私はVuejsで簡単なインライン編集機能に取り組んでいます。このjsbinをご覧ください。

ユーザー情報Editボタンでリストされていますが、これをクリックすると、それらを入力/選択フィールドに変換し、対応するオプションにヘルパーメソッドを設定します。

ここで私の問題は、私は選択値を変更しても、私のヘルパーメソッドが呼び出されているオプションを設定します。どのように私は一度だけそれらをロードし、それらを使用するためにこれを変更することができます。また、saveボタンをクリックすると、現在の行フィールドを必要に応じて検証する方法はありますか？

Answer 1

これを試してください。

new Vue({ 
    el: '#app', 

    data: { 
     users: [ 
     {name: 'Jhon', city:'Newyork', country: 'US', country_id:'23', city_id:'4'}, 
     {name: 'Ali', city:'London', country: 'UK', country_id:'13', city_id:'33'}, 
     {name: 'Raj', city:'Delhi', country: 'IN', country_id:'3', city_id:'11'}, 
     ], 
     cities: [ 
      {id:'4', val:'Newyork', country_id:'23'}, 
      {id:'33', val:'London', country_id:'13'}, 
      {id:'11', val:'Delhi', country_id:'3'}, 
     ], 
     countries: [ 
      {id:'23', val:'US'}, 
      {id:'13', val:'UK'}, 
      {id:'3', val:'IN'}, 
     ] 

    }, 
    computed:{ 
     citiesByCountry(){ 
     return this.countries.reduce((acc, country) => { 
      acc[country.id] = this.cities.filter(c => c.country_id == country.id) 
      return acc 
     }, {}) 
     } 
    }, 
    methods: { 
     edit :function(obj){ 
     this.$set(obj, 'editmode', true); 
     }, 
     save : function(obj){ 
     this.$set(obj, 'editmode', false); 
     }, 
     cloneLast:function(){ 
     var lastObj = this.users[this.users.length-1]; 
     lastObj = JSON.parse(JSON.stringify(lastObj)); 
     lastObj.editmode = true; 
     this.users.push(lastObj); 
     }, 

    } 
    }) 

テンプレートをこれに変更します。

<td> 
    <span v-if="user.editmode"> 
     <select v-model="user.city_id" required> 
     <option v-for="option in citiesByCountry[user.country_id]" :value="option.id">{{option.val}}</option> 
     </select> 
    </span> 
    <span v-else>{{user.city}}</span> 
    </td> 
    <td> 
    <span v-if="user.editmode"> 

     <select v-model="user.country_id" required> 
     <option v-for="option in countries" :value="option.id">{{option.val}}</option> 
     </select> 
    </span> 
    <span v-else>{{user.country}}</span> 
    </td> 

作業example。