Vue エラー: $set メソッドを正しく使用してネストされたプロパティを更新できません。解決方法は?

Vue エラー: $set メソッドを使用してネストされたプロパティを更新できません。解決方法は?

Vue の開発では、ネストされたプロパティの値を更新する必要があることがよくあります。通常、Vue が提供する $set メソッドを使用してプロパティ値を更新できます。ただし、$set メソッドを正しく使用してネストされたプロパティを更新できず、エラーが発生する状況が発生することがあります。この記事では、この問題の原因と解決策を説明します。

まず、具体的なコード例を見てみましょう。データ プロパティ dataObj を含む Vue コンポーネントがあり、その中にネストされたプロパティ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>

この例では、ボタンをクリックすると、nestedObj プロパティの値が新しい値に更新されます。ただし、このコードを実行すると、次のエラーが発生します。

このエラーには 2 つの理由があります。まず、$set メソッドを使用するときは、ネストされたプロパティの親オブジェクトがオブジェクトとして初期化されていることを確認する必要があります。つまり、未定義または null オブジェクトにネストされたプロパティを直接作成することはできません。

第 2 に、Vue の応答システムには、ネストされたプロパティの変更検出に制限があります。 $set メソッドを使用してプロパティを追加または更新すると、Vue はネストされたプロパティの変更を検出できず、その変更をビューに正しく適用できません。

この問題を解決するには、次の 2 つの解決策のいずれかを実行できます。

最初の解決策は、$emit メソッドを使用してプロパティの変更を子コンポーネントから親コンポーネントに渡し、次に親コンポーネントで $set メソッドを使用して、対応するネストされたプロパティを更新することです。この利点は、親コンポーネント内のデータが常に応答するようになり、ビューの一貫性が保証されることです。コード例は次のとおりです。

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

2 番目のオプションは、ネストされた属性の参照を変更して更新することです。新しいオブジェクトを作成し、Object.assign() メソッドを使用して古いプロパティを新しいオブジェクトにコピーし、新しいオブジェクトを参照することで、古いオブジェクトを置き換えることができます。この利点は、Vue がネストされたプロパティの変更を正しく検出し、その変更をビューに適用できることです。コード例は次のとおりです。

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

要約すると、$set メソッドを正しく使用してネストされたプロパティを更新できない場合は、$emit メソッドを使用するか、プロパティの参照を次のように変更できます。問題を解決してください、この問題。これにより、コードがネストされたプロパティを正しく更新し、ビューの一貫性を維持することが保証されます。

以上がVue エラー: $set メソッドを正しく使用してネストされたプロパティを更新できません。解決方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。