vue set方法

Vue.set 方法用于在 Vue 实例中的响应式对象中设置属性值。这个方法可以确保新添加的属性也是响应式的，并且能够触发视图更新。以下是 Vue.set 方法的使用方式：

对象使用

全局方法

Vue.set(vm.userInfo, "address", "beijing")；

实例方法

vm.$set(vm.userInfo, "address", "beijing")；

数组使用

全局方法

Vue.set(vm.userInfo, 2, 10)；

实例方法

vm.$set(vm.userInfo, 3, 8)；

参数说明

  • target：要更改的数据源，可以是一个对象或数组。

  • key：要更改的具体数据，如果是对象则是一个属性名，如果是数组则是一个索引。

  • value：重新赋的值。

注意事项

  • 如果直接修改数组中的数据，而数组的长度没有变化的话，将不会在界面上进行数据的同步更新。

  • Vue.set 只能用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。

示例代码

const app = new Vue({
  el: '#app',
  data: {
    list: ['apple', 'orange', 'banana'],
    info: { name: 'lisi', age: 12 }
  },
  methods: {
    addSex() {
      Vue.set(this.user, 'sex', '女')；
    }
  }
})；

以上是 Vue.set 方法的基本用法和注意事项。

Top
×
×