Maison > Article > interface Web > l'affectation du tableau vue ne peut pas être énumérée
Dans Vue, il est très courant d'utiliser des tableaux pour la liaison de données. Cependant, nous pouvons parfois rencontrer un problème étrange : lorsque nous modifions directement la valeur du tableau à l'aide d'une instruction d'affectation, le composant n'est pas restitué.
En effet, le système réactif de Vue est implémenté sur la base de setters JavaScript. Lorsque vous essayez de modifier directement les données dans l'instance Vue, Vue ne capture pas cette opération et ne peut pas mettre à jour la vue pour refléter ces modifications. En d'autres termes, Vue ne peut pas garantir la prise en charge des données non réactives.
Regardons un exemple :
<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>
Dans ce composant, nous avons un simple tableau items
, qui est utilisé pour afficher une liste non ordonnée. Il y a aussi un bouton, et quand on clique dessus, on assigne directement le tableau items
à un nouveau tableau. items
,它被用来显示一个无序列表。还有一个按钮,当我们点击它时,我们直接将items
数组赋值为一个新数组。
当我们运行这个组件时,我们会发现点击按钮并没有更新列表。这是因为我们使用了赋值语句直接改变了items
数组。在这种情况下,Vue无法检测到数组的变化。
那么应该怎么做呢?
Vue提供了一些方法来解决这个问题。让我们来看看其中的一些。
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
方法。第一个参数是要修改的数组,第二个参数是要修改的索引,第三个参数是要插入的新元素。
现在我们可以放心地修改数组了,视图也会跟着更新。
JavaScript的splice
方法可以在指定位置添加或删除元素。在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.splice(1, 1, "Orange"); } } }; </script>
在这个例子中,我们用splice
方法将Banana
替换为Orange
,并在原地更新了items
数组。这样就会触发重新渲染。
当然,这并不是说我们应该在任何时候都使用splice
方法,而是要根据自己的具体情况进行选择。
当需要移除数组中的某些元素时,我们可以利用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提供了很多可以应对不同情况的方法,例如Vue.set
、splice
和filter
items
. Dans ce cas, Vue ne peut pas détecter les modifications apportées au tableau. 🎜🎜Alors que devons-nous faire ? 🎜🎜Vue propose quelques moyens de résoudre ce problème. Jetons un coup d'œil à certains d'entre eux. 🎜updateItems
par la méthode Vue.set
. Le premier paramètre est le tableau à modifier, le deuxième paramètre est l'index à modifier et le troisième paramètre est le nouvel élément à insérer. 🎜🎜Nous pouvons maintenant modifier le tableau en toute sécurité et la vue sera mise à jour en conséquence. 🎜splice
de JavaScript peut ajouter ou supprimer des éléments à une position spécifiée. Dans Vue, nous pouvons l'utiliser pour mettre à jour les tableaux et déclencher le nouveau rendu de la vue. 🎜rrreee🎜Dans cet exemple, nous utilisons la méthode splice
pour remplacer Banana
par Orange
et mettre à jour les éléments
en place code> tableau. Cela déclenchera un nouveau rendu. 🎜🎜Bien sûr, cela ne signifie pas que nous devons utiliser la méthode splice
à tout moment, mais nous devons faire un choix en fonction de nos circonstances spécifiques. 🎜filter
. Il renvoie un nouveau tableau contenant uniquement les éléments qui satisfont à la condition. 🎜rrreee🎜Dans cet exemple, nous utilisons la méthode filter
pour créer un nouveau tableau, en ne conservant que les éléments qui ne sont pas égaux à Banana
. Puis on assigne le tableau d'origine à ce nouveau tableau, déclenchant ainsi une mise à jour de la vue. 🎜Vue.set
, splice
et filter
, etc. Choisir la méthode appropriée peut nous permettre de remplir plus facilement les fonctions dont nous avons besoin pour fonctionner, et également rendre notre code plus lisible et maintenable. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!