Vue interpolierten Wert nicht aktualisieren

Question

Ich benutze Vue JS 2.0 und das ist eine Tabelle, die ich versuche anzuzeigen. Alles wird anfangs korrekt angezeigt, aber wenn ich (in einer Methode namens editPlayerStat) editedPlayers [any-Player-Id] aktualisiere, wird der interpolierte Wert im entsprechenden small-Tag nicht aktualisiert.

Am editPlayerStat() überprüfe ich, ob editedPlayers [Any-Player-Id] sich richtig ändert und es ist. Aber aus irgendeinem Grund wird es nicht im small Tag aktualisiert. Auch in der span Tag v-if nicht aktualisiert und hat das gleiche Problem.

Während in der gleichen Methode editPlayerStat(), ich manuell aktualisieren player.stats.month.goals sehen Sie interpoliert, um zu sehen, ob auch das gleiche Problem hat und IT NICHT. Es funktioniert gut.

Was mache ich falsch?

<tr v-if="showMonth" v-for="player in players"> 
    <td><input type="checkbox"></td> 
    <td>{{ player.name }}</td> 
    <td><a @click.prevent="editPlayerStat(player._id,'goals',false)" href=""><i class="fa fa-arrow-down"></i></a> 
    &nbsp; {{ player.stats.month.goals }} &nbsp; 
    <a @click.prevent="editPlayerStat(player._id,'goals',true)" href=""><i class="fa fa-arrow-up"></i></a> 
    <span id="changed"> <small>({{ editedPlayers[player._id].stats.goals }})</small></span> 
    </td> 
    <td><a @click.prevent="editPlayerStat(player._id,'assists',false)" href=""><i class="fa fa-arrow-down"></i></a> 
    &nbsp; {{ player.stats.month.assists }} &nbsp; 
    <a @click.prevent="editPlayerStat(player._id,'assists',true)" href=""><i class="fa fa-arrow-up"></i></a> 
    <span id="changed" v-if="editedPlayers[player._id].stats.assists > 0"> <small>({{ editedPlayers[player._id].stats.assists }})</small></span> 
    </td> 
</tr> 

Das ist mein editPlayerStat() Methode:

editPlayerStat(id, type, isIncrease) { 
    console.log('editPlayerStat...'); 
    console.log('editedPlayers[player._id].stats.goals...' + this.editedPlayers[id].stats.goals); 
    if(isIncrease) { 
    console.log('increase'); 
    this.editedPlayers[id].stats[type]++; 
    this.editedPlayers[id].isEdited = true; 
    } else if(!isIncrease && this.editedPlayers[id].stats[type] > 0) { 
    console.log('decrease'); 
    this.editedPlayers[id].stats[type]--; 
    this.editedPlayers[id].isEdited = true; 
    } 
} 

eine andere Instanz:

Ich benutze v-Modell an einem Eingang und zeigt neben den interpolierten Wert und aktualisiert es nur gut, wenn ich Aktualisiere den input Tag-Wert. Aber wenn ich Änderungen im Objekt "player" beobachte, wird die Überwachungsfunktion nicht zum ersten Mal ausgeführt.

<input class="form-control" id="name" placeholder="Name" type="text" v-model="player.name">{{ player.name }} 


watch: { 
    player: function(player) { 
     console.log('from watch... '+JSON.stringify(player)); 
    } 
    }, 
methods: { 
    getPlayerInfo() { 
    var vm = this; 
    axios.get('http://localhost:3000/admin/players/info/'+'5847a093a5e13203a4d0455f') 
    .then(function (response) { 
     vm.player = response.data; 
     console.log(response); 
     console.log(JSON.stringify(vm.player)); 
     console.log('showForm: ' + vm.showForm); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
}, 
created: { 
    this.getPlayerInfo(); 
    } 

Ausgang:

Object { data: Object, status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest } 

{"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]} 

showForm: true 

from watch... {"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]} 

Wie Sie sehen können, obwohl die interpoliert player.name aktualisiert wird, wenn ich den Wert in dem input Tag bearbeiten, die Uhr-Funktion für player Eigenschaft läuft nicht außer für das erste Mal, wenn player mit einem Objekt initialisiert wurde.

Answer 1

Dank @vbranden und Teilnehmer in einer Ausgabe habe ich here erhoben. Also hier ist was falsch gelaufen ist.

Ich lief in this Verhalten in Vue 2.0, die gemäß der Dokumentation, "kann keine Eigenschaft hinzufügen oder löschen". Sie werden früher oder später darauf stoßen.

Die Sache war, dass ich Eigenschaften direkt zu einem Objekt hinzufügte (oder wie ich dachte 'String indexed array' Werte zu einem Array. Hinweis: siehe auch Problem; Javascript erlaubt keine assoziativen Arrays) und Vue couldn ' Achten Sie wegen dieser Einschränkung auf Änderungen.

Lösung: Anstatt Eigenschaften direkt einem Objekt zuzuweisen, müssen Sie Vue.set() oder this. $ Set() verwenden, um ihnen zuzuweisen. Dadurch kann Vue nach Änderungen in ihnen suchen.

Original-Problem: fiddle

editedPlayers: [] 
this.editedPlayers['someID'] = { name: 'John', stats: { goals: 10, assists: 10 }}; 
this.editedPlayers['someOtherID'] = { name: 'Flint', stats: { goals: 10, assists: 10 }}; 

Lösung: fiddle

editedPlayers: {} 
Vue.set(this.editedPlayers, 'someID', { name: 'John', stats: { goals: 10, assists: 10 }}); 
Vue.set(this.editedPlayers, 'someOtherID', { name: 'Flint', stats: { goals: 10, assists: 10 }});