Vue-Fehler: Die $set-Methode kann nicht korrekt zum Aktualisieren verschachtelter Eigenschaften verwendet werden. Wie kann das Problem gelöst werden?

Vue-Fehler: Die $set-Methode kann nicht korrekt verwendet werden, um verschachtelte Eigenschaften zu aktualisieren.

Bei der Entwicklung von Vue müssen wir häufig die Werte verschachtelter Eigenschaften aktualisieren. Normalerweise können wir die von Vue bereitgestellte Methode $set verwenden, um Eigenschaftswerte zu aktualisieren. Manchmal kommt es jedoch vor, dass die Methode $set nicht korrekt zum Aktualisieren verschachtelter Eigenschaften verwendet werden kann, was zu einem Fehler führt. In diesem Artikel wird die Ursache dieses Problems beschrieben und eine Lösung bereitgestellt.

Schauen wir uns zunächst ein konkretes Codebeispiel an. Nehmen wir an, wir haben eine Vue-Komponente, die eine Dateneigenschaft dataObj enthält, in der sich eine verschachtelte Eigenschaft nestedObj befindet.

<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>

Wenn wir in diesem Beispiel auf die Schaltfläche klicken, sollte der Wert der Eigenschaft „nestedObj“ auf den neuen Wert aktualisiert werden. Wenn wir diesen Code jedoch ausführen, wird ein Fehler angezeigt: TypeError: Undefiniert oder null kann nicht in ein Objekt konvertiert werden.

Es gibt zwei Gründe für diese Fehlermeldung. Wenn wir die Methode $set verwenden, müssen wir zunächst sicherstellen, dass das übergeordnete Objekt der verschachtelten Eigenschaft als Objekt initialisiert wurde. Das heißt, wir können keine verschachtelte Eigenschaft direkt für ein undefiniertes oder Nullobjekt erstellen.

Zweitens weist das reaktionsfähige System von Vue Einschränkungen bei der Erkennung von Änderungen in verschachtelten Eigenschaften auf. Wenn wir die Methode $set verwenden, um Eigenschaften hinzuzufügen oder zu aktualisieren, kann Vue Änderungen in verschachtelten Eigenschaften nicht erkennen und die Änderungen nicht korrekt auf die Ansicht anwenden.

Um dieses Problem zu lösen, können wir eine der folgenden beiden Optionen wählen.

Die erste Lösung besteht darin, die Eigenschaftsänderungen mit der Methode $emit von der untergeordneten Komponente an die übergeordnete Komponente zu übergeben und dann die Methode $set in der übergeordneten Komponente zu verwenden, um die entsprechenden verschachtelten Eigenschaften zu aktualisieren. Dies hat den Vorteil, dass wir sicherstellen können, dass die Daten in der übergeordneten Komponente immer reagieren und so die Konsistenz der Ansicht sicherstellen. Das Codebeispiel lautet wie folgt:

// 子组件
<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>

Die zweite Option besteht darin, die Referenz der verschachtelten Eigenschaft zu aktualisieren, indem sie geändert wird. Wir können das alte Objekt ersetzen, indem wir ein neues Objekt erstellen, die alten Eigenschaften mit der Methode Object.assign() in das neue Objekt kopieren und dann auf das neue Objekt verweisen. Dies hat den Vorteil, dass Vue Änderungen in verschachtelten Eigenschaften korrekt erkennen und die Änderungen auf die Ansicht anwenden kann. Das Codebeispiel lautet wie folgt:

<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>

Zusammenfassend lässt sich sagen, dass wir, wenn wir auf die Unfähigkeit stoßen, die Methode $set zum Aktualisieren verschachtelter Eigenschaften korrekt zu verwenden, die Methode $emit verwenden oder die Referenz der Eigenschaft ändern können, um dieses Problem zu lösen. Dadurch wird sichergestellt, dass unser Code verschachtelte Eigenschaften korrekt aktualisiert und die Ansichtskonsistenz beibehält.

Das obige ist der detaillierte Inhalt vonVue-Fehler: Die $set-Methode kann nicht korrekt zum Aktualisieren verschachtelter Eigenschaften verwendet werden. Wie kann das Problem gelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!