JavaScript (Vue) コードでオブジェクトのプロパティが読み取り専用としてマークされているのはなぜですか?

Question

boxes という状態変数 (ボックス オブジェクトを含む配列) を持つ Vue 2 アプリケーションがあります。これらのボックスのサブセットを抽出する計算されたプロパティがあります (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;
  ボックス.パッチ();
}

このメソッドはエラーを返しました:

vue.esm.js:648 [Vue warn]: v-on ハンドラーのエラー: "TypeError: の読み取り専用プロパティ 'object_class' に割り当てることができませんオブジェクト '#<Box>'''

ボックス オブジェクト (またはそのプロパティ) を明示的に読み取り専用にしたことはありません。 nearest_box_linked_boxes (親配列オブジェクト) は計算されたプロパティであるため、書き込むことができないことはわかっていますが、この配列内の各要素のプロパティを変更することはできるはずだと思います。

Vue と計算プロパティが原因で問題が発生しているのでしょうか、それとも別の原因でしょうか?

Answer 1

計算プロパティは常に「読み取り専用」として扱う必要があります。計算プロパティのセッターは例外です。

計算プロパティによって返されるオブジェクトを変更することは技術的には可能ですが、これは一般的に悪い考えです。依存関係が変更されると、オブジェクトは置き換えられ、変更は失われます。