Vue.js 更改数据的值，但数据不会更新

关于Vue数据，如下所示：

out:{
   arr:[
        {a:1}
       ]
}

当我使用

this.out.arr[0]={a:2}

更改值时，视图不会更新。但是如果我的代码是

this.out.arr[0].a=2，视图将更新

给你

您可以在方法
changeA
中注释和取消注释代码，以查看不同的结果
 我相信这只是关于通过索引更新阵列的标准警告：


Vue无法通过直接为索引赋值来检测对数组所做的更改

因此，与此相反：

this.out.arr[0]={a:2}

。。。您需要使用以下选项：

this.$set（this.out.arr，0，{a:2}）

更新：

为了理解问题中提到的两个案例之间的区别，完整地写出它们可能会有所帮助

this.out.arr[0]={a:2}
// ... 相当于。。。
const arr=this.out.arr//read
arr[0]={a:2}//写入

鉴于：

this.out.arr[0].a=2
// ... 相当于。。。
const obj=this.out.arr[0]//读取
对象a=2//写入

在上面的两个例子中，我将表达式的读写部分分开。使用数组索引读取值不是问题，只是写入。第一个示例尝试编写
arr
的
0
属性，这违反了Vue索引警告。第二个示例尝试写入
obj
的
a
属性，该属性没有数组索引，因此没有此类问题。
以上@skille answer是更新vue数据的正确方法！在vue文档中，它说

例如，当您将vm.someData设置为“新值”时，组件不会立即重新渲染。当队列刷新时，它将在下一个“滴答”中更新

所以，直接按索引设置不会立即更新dom。。。。你需要做forceUpdate

  this.out.arr[0] = {a:2}; // can not updated
  this.$nextTick(function () {        
    this.$forceUpdate(); // will be update
  });

感谢您的关注，但我不知道您是否访问了我的演示链接，事实是它可以通过索引进行更新…@也许在您的第二个示例中，
this.out.arr[0]。a=2，索引用于获取索引0处的对象。此对象的
a
属性是被动的，可以设置为无问题。我们正在修改数组中的对象，而不是数组本身。尝试使用数组索引设置值时会出现问题，如
this.out.arr[0]={a:2}
中所示。这正试图更改数组本身，并遇到文档中提到的问题。太棒了，这解决了我没有提出的另一个问题。谢谢，我学到了另一个技巧“this.$forceUpdate（）；”，这说明问题不是“Vue无法通过直接为索引赋值来检测对数组所做的更改”。@skille，只是应该手动更新，谢谢你们，谢谢stackoverflow~