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提供了一些方法来解决这个问题。让我们来看看其中的一些。

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

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方法，而是要根据自己的具体情况进行选择。

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提供了很多可以应对不同情况的方法，例如Vue.set、splice和filter

Lorsque nous exécutons ce composant, nous constaterons que cliquer sur le bouton ne met pas à jour la liste. En effet, nous avons utilisé une instruction d'affectation pour modifier directement le tableau 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. 🎜

1. Vue.set

🎜Vue.set est une méthode globale de Vue, utilisée pour ajouter des propriétés réactives aux objets réactifs. Lorsqu'il s'agit de tableaux, Vue.set peut également être utilisé pour insérer un nouvel élément à une position spécifiée. 🎜rrreee🎜Dans cet exemple, nous remplaçons l'instruction d'affectation de tableau dans la méthode 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. 🎜

2. splice

🎜La méthode 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émentsen 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. 🎜

3. filter

🎜Lorsque nous devons supprimer certains éléments du tableau, nous pouvons utiliser la méthode 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. 🎜

Résumé

🎜Dans Vue, l'affectation directe d'un tableau ne déclenche pas le nouveau rendu de la vue. Cela est dû au mécanisme d'implémentation du système réactif de Vue. Afin de résoudre ce problème, Vue propose de nombreuses méthodes pour gérer différentes situations, telles que 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!