vue補間値が更新されない

Question

Vue JS 2.0を使用していますが、これは表示しようとしているテーブルです。すべてが正しく表示されますが、editedlayer（anyPlayer）というメソッドを使用してediredPlayers [any-Player-Id]を更新すると、smallタグの補間値は更新されません。

editPlayerStat（）では、editedPlayers [any-Player-Id]が正しく変更されているかどうかを確認します。しかし何らかの理由でsmallタグで更新されていません。また、spanタグのv-ifは更新されず、同じ問題があります。

同じメソッドeditPlayerStat（）では、私は手作業でplayer.stats.month.goalsを更新していますが、補間されていて、同じ問題があるかどうかを確認することはできません。それはうまく動作します。

私は間違っていますか？

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

これは私のeditPlayerStat（）メソッドです：

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

別のインスタンス：

私は入力にV-モデルを使用し、横の補間値を表示したときに、私それだけで罰金を更新inputタグ値を更新してください。しかし、オブジェクトplayerの変更を監視しているときは、時計機能は初めて以外は実行されません。

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

出力：あなたが見ることができるように、私はinputタグに値を編集するときに補間player.nameが更新されていても、playerプロパティのウォッチ機能を除い

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"]} 

実行されません。最初にplayerがObjectで初期化されたとき。

Answer 1

@vbrandenと問題のある参加者のおかげで、私はhereを募集しました。だから間違っていたことがここにある。

ドキュメントによれば、 "プロパティの追加または削除を検出できません"というVue 2.0の動作はです。遅かれ早かれこれを実行します。私はオブジェクトに直接プロパティを追加していました（または、配列に配列の値を配列すると思ったので注意してください：問題も参照してください、javascriptは連想配列を許可しません）。そしてVue couldn 'この警告のために変更がないか見守ってください。

ソリューション：オブジェクトにプロパティを直接割り当てるのではなく、Vue.set（）またはthis。$ set（）を使用して割り当てる必要があります。これにより、VueはVueの変更を追跡できます。

オリジナル問題：fiddle

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

ソリューション：

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