Array Uhr mit Vue.js 2

Question

Ich bin einen Satz wählt (item.pricelists, die ein Element zugeordnet sind), die wiedergegeben in einer V-for-Schleife und mit V-Modell gebunden. Mögliche Auswahloptionen für dieses Element werden mit einem anderen v-for aus item.valid_pricelists gerendert. Beide werden im selben Array vom Server abgerufen. Jetzt muss ich aufpassen, wenn der Benutzer die Auswahl ändert, damit ich das item.pricelists-Array mit neuen Werten von item.valid_pricelists aktualisieren kann.

Render Teil:

<div v-for="(row,index) in item.pricelists"> 
    <select v-model="row.id"> 
     <option :value="price_list.id" v-for="price_list in item.valid_pricelists"> 
     {{price_list.description}} 
     </option> 
    </select> 
    Parent pricelist : {{row.parent_id}} 
</div> 

Uhr Teil:

watch:{ 
    'item.pricelists.id': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
} 

Nun Uhr - die gut für einfache Vars arbeitet - weigert sich zu rühren.

Hier ist die fiddle mit relevantem Teil des Codes.

ich am vue docs war auf der Suche, kann aber meinen Kopf um es nicht wickeln. Jede Hilfe wäre willkommen.

Answer 1

Ich weiß nicht, ob es möglich ist, dies mit der Uhr zu lösen, aber ich würde einen anderen Ansatz vorschlagen. Sie könnten v-on:change zu Ihrem wählt hinzufügen:

<select v-model="row.id" v-on:change="selectionChanged(row)"> 

und ein Verfahren zum Vue Instanz hinzufügen:

new Vue({ 
    ... 
    methods: { 
    selectionChanged: function(item) { 

    } 
    } 
} 

So können Sie diese Auswahl wissen hat sich verändert, wenn die selectionChanged Funktion aufgerufen wird.

Answer 2

Sie tatsächlich Beobachter auf Array-Variable gesetzt, das Problem mit Ihrem Ansatz Sie haben Beobachter festgelegt auf item.pricelists.id, aber item.pricelists ist ein Array, so dass Sie nicht direkt id auf diese zugreifen können.

Sie einen Beobachter auf komplette Array festlegen können wie folgt (siehe fiddle):

watch:{ 
    'item.pricelists': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
} 

Hinweis:

:

Caveat mit diesem Ansatz, wie in der docs erklärt

Wenn ein Objekt oder ein Array mutiert (anstatt ersetzt) ​​wird, ist der alte Wert derselbe wie der neue Wert, da sie referenzieren das gleiche Objekt/Array. Vue behält keine Kopie des Pre-Mutate-Wertes.

Wenn Sie oldValue sowie neue Wert möchten, können Sie diese fiddleVue.set mit aussehen wie here erläutert.

---

können Sie auch Beobachter auf einzelne Element des Arrays festgelegt wie folgt (siehe fiddle):

watch:{ 
    'item.pricelists.0.id': { 
     handler: function (val,oldVal) { 
      console.log(val + " - " + oldVal); 
     }, deep:true} 
}