为何我的JavaScript（Vue）代码中的对象属性被标记为只读状态？

Question

我有一个Vue 2应用程序，其中有一个状态变量（一个包含盒子对象的数组）叫做boxes。我有一个计算属性，它从这些盒子中提取一个子集（nearest_box_linked_boxes）。

我有一个方法，它遍历nearest_box_linked_boxes返回的盒子，并改变每个元素的一个属性的值：

for(let i=0;i<this.nearest_box_linked_boxes.length;i++)
{
  let box = this.nearest_box_linked_boxes[i];
  box.object_class = this.$store.state.selected_object_class;
  box.patch();
}

这个方法返回了一个错误：

vue.esm.js:648 [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'object_class' of object '#<Box>'"

我从未明确地将任何盒子对象（或它们的属性）设为只读。我确实知道我不能写入nearest_box_linked_boxes（父数组对象），因为它是一个计算属性，但我认为应该可以修改此数组中每个元素的属性。

我是否遇到了由Vue和计算属性引起的问题，还是其他原因？

Answer 1

您应该始终将计算属性视为“只读”，例外情况是计算属性的setter。

虽然在技术上可以修改由计算属性返回的对象，但这通常是一个坏主意。一旦依赖关系发生变化，该对象将被替换，您的更改将丢失。