vue.js 数据在递增时不更新

Question

我有一个包含数组的对象，该数组在完成一定数量的逻辑后递增。

Vue.js 似乎没有捕捉到这个增量并将其显示到视图中。

HTML：

<div id="demo">
  <p>{{points}}</p>
</div>

JS：

function Board()
{ 
  this.team1 = {pointsMade:[0]};
}

var newBoard = new Board();

newBoard.team1.pointsMade[0]++


new Vue({
  el: '#demo',
  data: {
    points: newBoard.team1.pointsMade
  }
})

setTimeout(newBoard.team1.pointsMade[0]++,1000)

我有一个概述问题的JSFiddle。

可以看到setTimeout(newBoard.team1.pointsMade[0]++,1000)运行后，值应该是'2'，但只显示在'1'。我在这里错过了什么？

Answer 1

当你定义时

  data: {
    points: newBoard.team1.pointsMade[0]
  }

points 变量只是分配了newBoard.team1.pointsMade[0] 的当前值，此时为1。这里没有魔法。 JS 原语按值工作，而不是按引用工作。

所以，更新newBoard.team1.pointsMade[0] 变量后，point 变量当然不会更新。

要完成这项工作，请使用对象而不是原始值。对象在 JS 中通过引用来工作。

来自Properties and Methods 示例：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3

编辑

这里还有一个caveat：

由于 JavaScript 的限制，当你直接设置一个带有索引的项目时，Vue 无法检测到，例如vm.items[indexOfItem] = newValue。所以，请使用Vue.set(newBoard.team1.pointsMade, 0, newBoard.team1.pointsMade[0] + 1);。

我更新了你的fiddle。