Warum sind Objekteigenschaften in meinem JavaScript-Code (Vue) als schreibgeschützt markiert?

Question

Ich habe eine Vue 2-Anwendung, die eine Statusvariable (ein Array mit Box-Objekten) namens boxes hat. Ich habe eine berechnete Eigenschaft, die eine Teilmenge dieser Boxen extrahiert (nearest_box_linked_boxes).

Ich habe eine Methode, die die von nearest_box_linked_boxes zurückgegebenen Boxen durchläuft und den Wert eines Attributs für jedes Element ändert:

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();
}

Diese Methode hat einen Fehler zurückgegeben:

vue.esm.js:648 [Vue-Warnung]: Fehler im v-on-Handler: "TypeError: Die schreibgeschützte Eigenschaft „object_class“ von kann nicht zugewiesen werden Objekt '#<Box>'"

Ich habe nie explizit Boxobjekte (oder deren Eigenschaften) schreibgeschützt gemacht. Ich weiß, dass ich nicht in nearest_box_linked_boxes (das übergeordnete Array-Objekt) schreiben kann, da es sich um eine berechnete Eigenschaft handelt, aber ich denke, es sollte möglich sein, die Eigenschaften jedes Elements in diesem Array zu ändern.

Habe ich ein Problem, das durch Vue und berechnete Eigenschaften verursacht wird, oder liegt es an etwas anderem?

Answer 1

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

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