Vuejs Inline-Bearbeitung mit Select-Box-Option Anruf Probleme

Question

Guten Tag, ich arbeite an einer einfachen Inline-Bearbeitungsfunktion mit Vuejs. Bitte werfen Sie einen Blick auf diese jsbin.

Benutzerinfo. aufgelistet mit Edit buttons, wenn geklickt ich diese in Eingabe/Auswahl Felder und füllen Sie die entsprechenden Optionen mit Hilfsmethoden.

Mein Problem hier ist, sobald ich einige Optionen ausfüllen, meine Helfer Methoden aufgerufen werden, auch wenn ich Wert ändern. Wie kann ich das ändern, um sie nur einmal zu laden und zu benutzen? Wie kann ich die aktuellen Zeilenfelder validieren, wenn Sie auf die Schaltfläche save klicken?

Answer 1

Versuchen Sie dies.

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); 
     }, 

    } 
    }) 

Und ändern Sie Ihre Vorlage zu diesem.

<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> 

Arbeiten example.