当尝试在Vue 3中更新关联数组中的单个元素时，所有值都被更新

Question

我在Vue3中有以下代码:

data: function() {
return {
testData:[],
}
},
mounted() {
var testObj = {
name: 'aniket',
lastname: 'mahadik'
}
for (let index = 0; index < 3; index++) {
this.testData.push(testObj);
}
},
methods: {
updateLastName: function(key) {
this.testData[key].lastname = 'kirve';
}
}

当我调用updateLastName(1)来更新第二个元素的lastname时，它正在更新所有元素的lastname。

我试了几种方法，但都没有理想的结果。

谁能告诉我这里出了什么问题吗?

Answer 1

这是因为您正在推引用到数组中的相同对象，所以当您更新数组中的任何项时，您将更新每个项，因为它引用了相同的对象。

通过克隆对象进行push:testData.value.push({...testObj})

或者将定义放入push

testData.value.push({ name: 'aniket', lastname: 'mahadik' })

JavaScript是按引用传递还是按值传递的语言?