this.$set で vue 配列にデータを追加する

2023年3月4日#vue132

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

Vueでは、既存のインスタンスに新しい根レベルのリアクティブプロパティを動的に追加することはできませんが、Vue.set(object, key, value)メソッドを使用してネストされたオブジェクトにリアクティブプロパティを追加できます。配列にオブジェクトを直接追加してもビューは更新されませんが、this.$setを使用して上書きすることでビューが更新されます。

Vue は、すでに作成されたインスタンスに動的に新しいルートレベルのリアクティブプロパティを追加することを許可していませんが、Vue.set (object, key, value) メソッドを使用してネストされたオブジェクトにリアクティブプロパティを追加することができます。

配列にオブジェクトを直接追加すると、ビューは更新されませんが、正しい値を出力することができます。ビューを更新するには、this.$set を使用して上書きする必要があります。

 for (let i = 0; i < this.data.length; i++) {
  // this.data[i].state = false;
  this.$set(this.data[i], 'state', false)
}