Vue 中实现修改数组，并保持页面渲染数据是响应式更改

如果你在 Vue 中使用数组并希望确保对数组项的修改是响应式的，直接替换数组项可能不会触发 Vue 的响应式更新。为了确保响应式更新，你可以使用 Vue 提供的 Vue.set() 方法（在 Vue 2 中）或使用 this.$set() 方法（在 Vue 2 和 Vue 3 中的组合式 API）。

示例代码（Vue 2 和 Vue 3）

假设你在 Vue 组件中处理这个问题：

<template>
  <div>
    <button @click="updateCard">Update Card</button>
    <div v-for="card in cards" :key="card.card_id">
      {
  
  { card.name }}: {
  
  { card.value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { card_id: 1, name: 'Card 1', value: 100 },
        { card_id: 2, name: 'Card 2', value: 200 },
        { card_id: 3, name: 'Card 3', value: 300 },
      ],
    };
  },
  methods: {
    updateCard() {
      const targetCardId = 2;
      const newData = { name: 'Updated Card 2', value: 250 };

      // 查找 card_id 为 targetCardId 的项的索引
      const index = this.cards.findIndex(card => card.card_id === targetCardId);

      if (index !== -1) {
        // 使用 Vue.set() 或 this.$set() 确保响应式更新
        this.$set(this.cards, index, { ...this.cards[index], ...newData });
        // 或者在 Vue 3 中可以直接使用
        // this.cards[index] = { ...this.cards[index], ...newData };
      }
    },
  },
};
</script>

代码说明

1. 数据定义：在 data 中定义一个 cards 数组。
2. 更新方法：在 updateCard 方法中，查找特定 card_id 的索引。
3. 确保响应式更新：
   • 在 Vue 2 中，使用 this.$set(this.cards, index, newValue) 来替换数组项，确保 Vue 能够检测到变化。
   • 在 Vue 3 中，直接替换数组项通常是响应式的，但如果你在 Vue 2 中工作，使用 this.$set() 是必要的。

注意事项

• 在 Vue 3 中，使用 this.cards[index] = newValue 通常会保持响应式，因为 Vue 3 的响应式系统更为强大。
• 在 Vue 2 中，确保使用 this.$set() 来替换数组项，以确保 Vue 能够检测到变化并更新视图。

这样，你就可以确保在 Vue 中对数组项的修改是响应式的。

原文地址：https://blog.csdn.net/weixin_52584863/article/details/145228329

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！