Javascript Vuejs和Vue.set（），更新数组

我是Vuejs的新手。做了点什么，但我不知道这是简单/正确的方法

我想要什么

我想要数组中的一些日期，并在事件中更新它们。首先我试了一下Vue.set，但没有成功。现在在更改我的数组项之后：

this.items[index] = val;
this.items.push();

我不向数组推送（）任何内容，它将更新。。但有时最后一项会被隐藏，不知何故。。。我认为这个解决方案有点不成熟，如何使它稳定

简单代码如下：

newvue({
el:“#应用程序”，
数据：{
f:'DD-MM-YYYY'，
项目：[
"10-03-2017",
"12-03-2017"
]
},
方法：{
cha：函数（索引、项、内容、计数）{
console.log（项+“索引>”+索引）；
val=时刻（this.items[index]，this.f）.add（count，what）.format（this.f）；
此.项目[索引]=val；
this.items.push（）；
console.log（“arr长度：“+this.items.length”）；
}
}
})

ul{
列表样式类型：无；
}

-一天
{{item}}
+一天

如果您这样操作阵列，VueJS将无法获取对状态的更改

如中所述，您应该使用push、splice等数组方法，并且永远不要修改像这样的索引

a[2]=2

，也不要修改数组的.length属性

newvue({
el:“#应用程序”，
数据：{
f:'DD-MM-YYYY'，
项目：[
"10-03-2017",
"12-03-2017"
]
},
方法：{
cha：函数（索引、项、内容、计数）{
console.log（项+“索引>”+索引）；
val=时刻（this.items[index]，this.f）.add（count，what）.format（this.f）；
此.items.$set（索引，val）
console.log（“arr长度：“+this.items.length”）；
}
}
})

ul{
列表样式类型：无；
}

-第{{项目}天
+一天

EDIT 2

• 对于所有需要反应性的对象更改，请使用

  Vue.set（对象、属性、值）

• 对于数组突变，您可以查看当前支持的列表

---

编辑1 对于vuex，您需要执行

Vue.set（state.object、key、value）

---

起初的 所以，对于其他提出这个问题的人来说。它出现在Vue 2中的某个位置。*他们删除了

this.items.$set（index，val）

而支持

this.$set（this.items，index，val）

---

剪接仍然可用，下面是vue中可用的阵列突变方法的链接

如前所述-VueJS无法跟踪这些操作（数组元素分配）。 VueJS使用阵列跟踪的所有操作都是。 但我会再次复制它们：

• 推
• 流行音乐（）
• 移位（）
• 取消移位（）
• 拼接（）
• 排序（）
• 反向

在开发过程中，您会面临一个问题—如何接受它：）

push（）、pop（）、shift（）、unshift（）、sort（）和reverse（）非常简单，在某些情况下对您有所帮助，但主要关注点在于拼接（），它允许您有效地修改VueJs跟踪的阵列。 因此，我可以分享一些最常用于阵列的方法

您需要替换数组中的项：

// note - findIndex might be replaced with some(), filter(), forEach() 
// or any other function/approach if you need 
// additional browser support, or you might use a polyfill
const index = this.values.findIndex(item => {
          return (replacementItem.id === item.id)
        })
this.values.splice(index, 1, replacementItem)

注意：如果您只需要修改项目字段-您可以通过以下方式完成：

this.values[index].itemField = newItemFieldValue

VueJS将跟踪这一点，因为项目（对象）字段将被跟踪

您需要清空数组：

this.values.splice(0, this.values.length)

实际上，您可以使用此功能执行更多操作 您可以添加多条记录、删除多条记录等

Vue.set（）和Vue.delete（）

Vue.set（）和Vue.delete（）可用于将字段添加到数据的UI版本中。例如，在对象中需要一些额外的计算数据或标志。可以对对象或对象列表（在循环中）执行此操作：

并在Axios调用之前以相同的格式将编辑后的数据发送回后端：

 Vue.delete(plan, 'editEnabled') //(or this.$delete)

---

另一种解决问题的更轻量级方法可能是，暂时编辑数组，然后将整个数组分配回变量。因为Vue不监视单个项目，所以它将监视整个变量的更新

因此，您也可以这样做：

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

---

这也会更新您的DOM。

观察对象和数组的反应性：

---

正如文档中所说，$set只是一个漂亮的.splice（）。这是有道理的，因为就像他们在文档中说的那样，你应该使用数组的方法修改数组。请不要将制表符缩进与空格缩进相结合，在SE应用程序中，制表符的大小显然不同，使您的代码难以读取在我的情况下，用于推送操作的ES6 spread运算符可能无法与VUE一起工作我需要提供什么字符串作为“索引”？@Kokodoko您能澄清一下您想做什么吗？如果它是一个数组，它应该是索引的数字。如果您在对象上设置字段，字符串就是。啊，好吧，我的IDE坚持它必须是字符串，一定是有问题。Vue.set不适用于vuex。还有这个。$set已弃用。@MartinCalvert它说“在向对象添加属性时”。这是Vue.set的主要用途，而不仅仅与vuex相关。不赞成，我在链接上读过，但现在再读一遍，我不完全理解它。

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;