vue.js Methode kann nicht auf Variable aus Datenobjekt mit mehreren Zeilen zugreifen

Question

Ich lerne gerade vue.js und Probleme beim Zugriff auf Daten in den Methoden.

Daten werden als globale Variable geladen und eingestellt (für jetzt, ist dies wahrscheinlich ändern wird, aber nicht Teil des Problems, jetzt denke ich)

durch diese Daten Ajax-Aufruf empfangen:

Daten ": [{"itemId": "58646f066803fa62388b4573", "farbe": "# ffb878", "name": "test1", "startDate": "24.04.2017", "work": "9.25"}, {" itemId ":" 58646f066803fa62388b4572 "," Farbe ":" # ffb878 "," Name ":" test2 "," startDate ":" 24.04.2017 "," work ":" 4,25 "}, {" itemId ": "58646f066803fa62388b4571", "Farbe": "# a4bdfc", "Name": "test3", "startDate": "05/01/2017", "arbeiten": "24.00"}]

was ist se t als ein globales (variable Daten außerhalb der Funktionen eingestellt) mit:

... Erfolg: function (jsonObj) { data [ 'item'] = jsonObj.data

....

jetzt für den vue Teil:

var app = new Vue({ 
    el:'#canvas', 
    data: { 
    items: data['item'] 
    }, 
    methods: { 
    moveItem: function(){ 
     console.log("new date: "+this.startDate); 
    } 
    } 
}) 

die html:

<div v-for="row in items" class="entirerow" v-bind:id="'row'+row.itemId"> 
            <div class="itemrow">{{ row.name }}</div> 
            <div class="itemrow"><input type="text" v-model="row.startDate" @change="moveItem"></div> 
            <div class="itemrowlast">{{ row.work }}</div> 

          </div> 

Dies zeigt schön 3 Zeilen mit den richtigen Daten in jeder Zeile. So weit, ist es gut. Aber jetzt, wenn ich etwas im Eingabewert ändere, wird die Methode moveItem ausgelöst, aber gibt "new date: undefined" in der console.log an.

Ich habe versucht console.log ("new date:" + this.items. StartDate) auch, aber keine Zigarre und dann würde es scheinen, die Methode würde nicht wissen, welche Zeile behandelt wird.

Wie kann ich auf die richtigen Daten in der Methode zugreifen, also ab einer bestimmten Zeile in der Schleife?

Danke!

Answer 1

Sie beziehen sich auf Datenobjekt in Verfahren (this.startDate) nicht auf Artikel

moveItem: function(){ 
    console.log("new date: "+this.startDate); 
} 

Sie Ihren Code wie diese

ändern

Vorlage

@change="moveItem(row)" 

Skript

moveItem: function(row){ 
    console.log("new date: " + row.startDate); 
}