Vue如何用this.$set改变数组里的某个值

下面是关于“Vue如何用this.$set改变数组里的某个值”的完整攻略：

简介

Vue提供了一些方便的方法来让我们更好地处理数据。在使用 Vue 开发过程中，有时我们需要改变数组某个值时，需要用到 this.$set 方法。

使用方法

1. 直接使用 $set 方法

我们可以直接使用 this.$set 方法来改变数组中的某个值。使用时需要传入三个参数，第一个参数是需要修改的数组，第二个参数是数组中需要修改的元素下标，第三个参数是需要修改的值。

<template>
  <div>
    <button @click="change">点击我改变数组的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['Vue', 'React', 'Angular']
    };
  },
  methods: {
    change() {
      // 使用this.$set修改数组
      this.$set(this.arr, 1, 'Webpack');
    }
  }
};
</script>

1. 使用 Vue.set 方法

Vue 对象也提供了一个 Vue.set 方法，与 this.$set 方法的功能类似。使用时需要传入三个参数，第一个参数是需要修改的数据对象，第二个参数是需要修改的属性名称，第三个参数是需要修改的值。

<template>
  <div>
    <button @click="change">点击我改变用户的姓名</button>
    <p>用户姓名：{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    };
  },
  methods: {
    change() {
      Vue.set(this.user, 'name', 'Lucy');
    }
  }
};
</script>

注意事项

使用 this.$set 或 Vue.set 方法修改数组或对象属性时需要注意以下几点：

• 即使这一位置的数据为对象或数组，也必须要使用 this.$set 方法来修改属性或下标对应的值；
• 在修改数组下标对应的值之前，数组必须已经存在并被赋值为一个空数组（或初始化了数组长度）；
• 在修改对象属性之前，这个属性必须已经存在。

总结

以上就是关于“Vue如何用this.$set改变数组里的某个值”的完整攻略。使用 this.$set 或 Vue.set 方法可以很方便地实现对数组或对象属性的修改。使用时需要注意 $set 的三个参数以及一些注意事项。