ホームページ >ウェブフロントエンド >フロントエンドQ&A >vue 配列の割り当てを列挙できません
vue 配列の割り当てを列挙できません
- WBOYオリジナル
- 2023-05-25 11:03:37438ブラウズ
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 では、これを使用して配列を更新し、ビューの再レンダリングをトリガーできます。 <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>この例では、
メソッドを使用して 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.set
、splice、filter など、さまざまな状況に対処するための多くのメソッドを提供します。適切な方法を選択すると、操作する必要がある機能を簡単に完了でき、コードが読みやすく保守しやすくなります。
以上がvue 配列の割り当てを列挙できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。