Erreur Vue : la méthode $set ne peut pas être utilisée correctement pour mettre à jour les propriétés imbriquées. Comment le résoudre ?

Erreur Vue : La méthode $set ne peut pas être utilisée correctement pour mettre à jour les propriétés imbriquées. Comment le résoudre ?

Dans le développement de Vue, nous devons souvent mettre à jour la valeur des propriétés imbriquées. Normalement, nous pouvons utiliser la méthode $set fournie par Vue pour mettre à jour les valeurs des propriétés. Cependant, nous rencontrons parfois une situation dans laquelle la méthode $set ne peut pas être utilisée correctement pour mettre à jour les propriétés imbriquées, ce qui entraîne une erreur. Cet article décrit la cause de ce problème et propose une solution.

Tout d’abord, regardons un exemple de code spécifique. Disons que nous avons un composant Vue qui contient une propriété de données dataObj qui contient une propriété imbriquée nestedObj.

<template>
  <div>
    <p>嵌套属性的值为：{{ dataObj.nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj() {
      this.$set(this.dataObj, 'nestedObj', '新值');
    }
  }
};
</script>

Dans cet exemple, lorsque nous cliquons sur le bouton, la valeur de la propriété nestedObj doit être mise à jour avec la nouvelle valeur. Cependant, si nous exécutons ce code, nous trouverons une erreur : TypeError : Impossible de convertir undéfini ou null en objet.

Il y a deux raisons pour ce rapport d'erreur. Tout d'abord, lorsque nous utilisons la méthode $set, nous devons nous assurer que l'objet parent de la propriété imbriquée a été initialisé en tant qu'objet. Autrement dit, nous ne pouvons pas créer directement une propriété imbriquée sur un objet non défini ou nul.

Deuxièmement, le système réactif de Vue présente des limites dans la détection des modifications dans les propriétés imbriquées. Lorsque nous utilisons la méthode $set pour ajouter ou mettre à jour des propriétés, Vue ne peut pas détecter les modifications dans les propriétés imbriquées et ne peut pas appliquer correctement les modifications à la vue.

Pour résoudre ce problème, nous pouvons choisir l'une des deux options suivantes.

La première solution consiste à utiliser la méthode $emit pour transmettre les modifications de propriété du composant enfant au composant parent, puis à utiliser la méthode $set dans le composant parent pour mettre à jour les propriétés imbriquées correspondantes. L'avantage de ceci est que nous pouvons garantir que les données du composant parent sont toujours réactives, garantissant ainsi la cohérence de la vue. L'exemple de code est le suivant :

// 子组件
<template>
  <div>
    <p>嵌套属性的值为：{{ nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  props: ['nestedObj'],
  methods: {
    updateNestedObj() {
      this.$emit('update:nestedObj', '新值');
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <child-component :nestedObj="dataObj.nestedObj" @update:nestedObj="updateNestedObj"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj(newValue) {
      this.$set(this.dataObj, 'nestedObj', newValue);
    }
  }
};
</script>

La deuxième option consiste à mettre à jour en changeant la référence de la propriété imbriquée. Nous pouvons remplacer l'ancien objet en créant un nouvel objet, en copiant les anciennes propriétés dans le nouvel objet à l'aide de la méthode Object.assign(), puis en référençant le nouvel objet. L'avantage est que Vue peut détecter correctement les modifications dans les propriétés imbriquées et appliquer les modifications à la vue. L'exemple de code est le suivant :

<template>
  <div>
    <p>嵌套属性的值为：{{ dataObj.nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj() {
      this.dataObj = Object.assign({}, this.dataObj, {
        nestedObj: '新值'
      });
    }
  }
};
</script>

En résumé, lorsque nous rencontrons l'impossibilité d'utiliser correctement la méthode $set pour mettre à jour les propriétés imbriquées, nous pouvons utiliser la méthode $emit ou modifier la référence de la propriété pour résoudre ce problème. Cela garantit que notre code met à jour correctement les propriétés imbriquées et maintient la cohérence de la vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!