Pourquoi les propriétés des objets sont-elles marquées en lecture seule dans mon code JavaScript (Vue) ?

Question

J'ai une application Vue 2 qui a une variable d'état (un tableau contenant des objets boîte) appelée boxes. J'ai une propriété calculée qui extrait un sous-ensemble de ces boîtes (nearest_box_linked_boxes).

J'ai une méthode qui parcourt les cases renvoyées par nearest_box_linked_boxes et modifie la valeur d'un attribut sur chaque élément :

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;
  boîte.patch();
}</pré>
<p>Cette méthode a renvoyé une erreur : </p>
<pre class="brush:php;toolbar:false;">vue.esm.js:648 [Vue warn] : Erreur dans le gestionnaire v-on : "TypeError : Impossible d'attribuer à la propriété en lecture seule 'object_class' de objet '#<Box>'"

Je n'ai jamais explicitement créé d'objets boîte (ou leurs propriétés) en lecture seule. Je sais que je ne peux pas écrire dans nearest_box_linked_boxes (l'objet du tableau parent) car il s'agit d'une propriété calculée, mais je pense qu'il devrait être possible de modifier les propriétés de chaque élément de ce tableau.

Est-ce que je rencontre un problème causé par Vue et les propriétés calculées, ou s'agit-il d'autre chose ?

Answer 1

Vous devez toujours traiter les propriétés calculées en "lecture seule", à l'exception du setter de la propriété calculée.

Bien qu'il soit techniquement possible de modifier l'objet renvoyé par une propriété calculée, c'est généralement une mauvaise idée. Une fois les dépendances modifiées, l'objet sera remplacé et vos modifications seront perdues.