vue插值不更新

Question

我正在使用 Vue JS 2.0，这是我要显示的 table。最初一切都正确显示，但是当我更新（在称为 editPlayerStat 的方法中）editedPlayers[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-model 并在旁边显示内插值，当我更新 input 标签值时它更新得很好。但是当我 'watch' 对象发生变化时 player，watch 函数不会运行除了第一次。

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

输出：

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

如您所见，即使在我编辑 input 标记中的值时更新了插值 player.name，player 属性的监视功能却没有't 运行除了第一次 player 是用对象初始化的。

Answer 1

感谢@vbranden 和我提出的问题的参与者 here。这就是问题所在。

我运行正在关注 Vue 2.0 中的 this 行为，根据文档，"cannot detect property addition or deletion"。你迟早会运行进入这个。

问题是，我直接将属性添加到对象（或者我认为 'string indexed array' 值添加到数组。注意：另见问题；javascript 不允许关联数组) 并且由于这个警告，Vue 无法观察它的变化。

解决方法： 不是直接给Object赋值，而是用Vue.set()或this.$set()赋值。这允许 Vue 跟踪它们的变化。

原题：fiddle

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

解决方案：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 }});

vue插值不更新

vue interpolated value not updating

vue.js

vuejs2