vue $set更新数组

作者：刎心封爱为伱锁情发布日期:2025-03-17 浏览:307

// 使用 Vue 的 $set 方法更新数组

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    updateArray() {
      // 使用 $set 更新数组中的某个元素，确保 Vue 能够检测到变化
      this.$set(this.items, 2, 'new value'); // 将索引为2的元素更新为 'new value'

      // 或者添加新元素到数组中
      this.items.push('another new value'); // 这种方式 Vue 也可以检测到变化
    }
  }
});

/*
解释：
1. `this.$set` 是 Vue 提供的一个方法，用于在响应式对象中设置属性值，并确保该变化能够被 Vue 检测到。
2. `$set` 方法的第一个参数是要修改的目标对象或数组，第二个参数是键名（对于数组来说是索引），第三个参数是新的值。
3. 对于数组的操作如 `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse` 等，Vue 已经做了特殊处理，可以直接使用并能被 Vue 检测到变化。
*/

上一篇：vue router.push

下一篇：vue2 filter