為何我的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。

雖然在技術上可以修改由計算屬性傳回的對象，但這通常是個壞主意。一旦依賴關係發生變化，該物件將被替換，您的變更將遺失。