Question

我正在使用Vue JS 2.0，这是我试图展示的表格。一切都在最初显示正确，但是当我更新（在一个名为editPlayerStat的方法中）editedPlayers [any-Player-Id]时，它不会更新相应small标签中的插值。

在editPlayerStat（）中，我检查editPlayers [any-Player-Id]是否正在正确更改，确实如此。但由于某些原因，它不会在small标记中进行更新。另外，在span代码中，如果没有更新，则会出现相同的问题。

虽然在同一方法editPlayerStat（）中，我手动更新player.stats.month.goals你看到插值，看看是否也有同样的问题和IT DOESN＆＃39; T.它运作得很好。

我做错了什么？

<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标记值时，它会更新。但是，当我观看＆＃39;对于对象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();
  }

输出：

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.name标记中修改值时更新了插值input，player属性的监视功能也不会运行，除非这是第一次使用Object初始化player时。

Answer 1

感谢@vbranden和问题的参与者，我提出了here。所以这就是出了什么问题。

我在Vue 2.0中遇到this行为，根据文档，“无法检测属性添加或删除”。你迟早会碰到这个。

事情是，我直接向Object添加属性（或者我认为'字符串索引数组'值为数组。注意：也看问题; javascript不允许关联数组）和Vue不能由于这个警告，请注意它的变化。

解决方案：您需要使用Vue.set（）或此。$ set（）来分配属性，而不是直接将属性分配给Object。这允许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插值不更新

1 个答案: