解决vue中修改数组和对象时视图层不响应的方法

解决vue中修改数组和对象时视图层不响应的方法

在vue中无法使用Object.defineProperty(set(){})来更改数据,因为其不支持引用数据(数组,对象)类型 set劫持不到

1. 数组使用 this.$set(数组,索引值,值) 来解决

2. 数组使用 this.$set(对象,属性名,值) 来解决 (只针对于对象需要新增的属性)

 

export default {
  data() {
    return {
      arr: ["张三", "李四", "王五"],
      obj: { name: "张三", age: 20 },
    };
  },
  methods: {
    arrfn() {
      this.$set(arr, 0, "赵六");
    },
    objfn() {
      this.$set(obj, "gender", "男");
    },},};

 

 

项目中使用

当VueX的数据已经被vuex内的函数更新完毕,但页面上的数据却没有更新时使用

additem(satet,payload){
    let indexA=state.arr.findindex((item)=>item.id == payload.id)
    Vue.set(state.arr,indexA,payload)
}

• 此处使用一个添加vuex数组项的函数作为演示

 

语法:

Vue.set(object, key, value)
Vue.set(要更改的数据源,要更改的具体数据,重新赋的值)