美文网首页
Vue使用$set动态给数据设置属性

Vue使用$set动态给数据设置属性

作者: leslie1943 | 来源:发表于2019-11-27 11:32 被阅读0次
在实际的开发过程中,给表单元素绑定model的时候,绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方式,是无法更新视图的,需要使用, this.$set(dataName,keyName,keyValue)
export default {
  data:{
    // 先定义一个空对象
    formObject:{}
  },
  mounted() {
    this.initPage()
  },
  methods:{
    initPage(){
      this.$store.dispatch(namespace/callData).then(res=>{
        // 给数据设置key-value
        res.data.forEach(item=>{
          // ❗❗❗❗❗ this.formObject[item.name] = item.value // ❗❗❗❗ 这种方式是不能更新视图的
          this.$set(this.formObject, item.name, item.value) // ✅✅✅✅可以更新视图
        })
      })
    }
  }
}

相关文章

  • Vue使用$set动态给数据设置属性

    在实际的开发过程中,给表单元素绑定model的时候,绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方...

  • 2021 web面试题常见之vue一 computed和watc

    $set vue中给obj复杂数据,动态添加属性。已知watch obj需要deep,那么设置新属性让页面实时更新...

  • Vue.set和Vue数据监测

    Vue.set this.$set(this.student,'添加的属性','添加的属性值') Vue数据监测 ...

  • vue this.$set

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • vue

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • uni-app动态添加根级别的响应式属性

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, pr...

  • Spring属性注入

    Spring属性注入 构造方法注入 使用设置属性值 Set方法注入 使用set方...

  • 对象 数组 更新事项

    对象更改检测注意事项对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(o...

  • 面向对象的理解

    封装 语法 类内 private 实现 属性私有,get/set get 获得数据 set 设置数据 alt + ...

  • Vue.set全局操作及改变数据的三种方法

    Vue.set Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定...

网友评论

      本文标题:Vue使用$set动态给数据设置属性

      本文链接:https://www.haomeiwen.com/subject/asqpwctx.html