vue 配列の割り当てを列挙できません-フロントエンドQ&A-php.cn

vue 配列の割り当てを列挙できません

WBOY

リリース： 2023-05-25 11:03:37

オリジナル

424 人が閲覧しました

Vue では、データバインディングに配列を使用するのが非常に一般的です。ただし、場合によっては、奇妙な問題が発生することがあります。代入ステートメントを使用して配列の値を直接変更すると、コンポーネントが再レンダリングされません。

これは、Vue の応答システムが JavaScript セッターに基づいて実装されているためです。 Vue インスタンスのデータを直接変更しようとすると、Vue はこの操作をキャプチャせず、これらの変更を反映するようにビューを更新できません。つまり、Vue は応答しないデータのサポートを保証できません。

例を見てみましょう:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = ["Grape", "Orange", "Pineapple"];
    }
  }
};
</script>

ログイン後にコピー

このコンポーネントには、順序なしリストを表示するために使用される単純な配列 items があります。ボタンもあります。これをクリックすると、items 配列を新しい配列に直接割り当てます。

このコンポーネントを実行すると、ボタンをクリックしてもリストが更新されないことがわかります。これは、代入ステートメントを使用して items 配列を直接変更したためです。この場合、Vue は配列への変更を検出できません。＃＃＃＃＃＃だから何をすべきか？

Vue は、この問題を解決するためのいくつかの方法を提供します。そのうちのいくつかを見てみましょう。

1. Vue.set

Vue.set は Vue のグローバルメソッドで、応答性の高いプロパティを応答性の高いオブジェクトに追加するために使用されます。配列を扱う場合、Vue.set を使用して、指定した位置に新しい要素を挿入することもできます。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      Vue.set(this.items, 1, "Orange");
    }
  }
};
</script>

ログイン後にコピー

この例では、

updateItems

メソッドの配列代入ステートメントを Vue.set メソッドに置き換えます。最初のパラメータは変更する配列、2 番目のパラメータは変更するインデックス、3 番目のパラメータは挿入する新しい要素です。これで、配列を安全に変更できるようになり、それに応じてビューが更新されます。

2. splice

JavaScript の

splice

メソッドは、指定された位置に要素を追加または削除できます。 Vue では、これを使用して配列を更新し、ビューの再レンダリングをトリガーできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><template> <div> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <button @click="updateItems">Update Items</button> </div> </template> <script> export default { data() { return { items: ["Apple", "Banana", "Cherry"] }; }, methods: { updateItems() { this.items.splice(1, 1, "Orange"); } } }; </script></pre><div class="contentsignin">ログイン後にコピー</div></div>この例では、

splice

メソッドを使用して Banana を Orange に置き換え、その場で items# を更新しました # ＃配列。これにより、再レンダリングがトリガーされます。 もちろん、常に splice

メソッドを使用する必要があるという意味ではありませんが、特定の状況に応じて選択する必要があります。

3. filter

配列内の特定の要素を削除する必要がある場合は、

filter

メソッドを使用できます。条件を満たす要素のみを含む新しい配列を返します。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = this.items.filter(item => item !== "Banana");
    }
  }
};
</script>

ログイン後にコピー

この例では、filter メソッドを使用して新しい配列を作成し、

Banana と等しくない要素のみを保持します。次に、元の配列をこの新しい配列に割り当て、ビューの更新をトリガーします。 概要

Vue では、配列を直接割り当ててもビューの再レンダリングがトリガーされません。これは、Vue の応答システムの実装メカニズムによるものです。この問題を解決するために、Vue は、