vue将对象新增的属性添加到检测序列的方法

vue中将对象中新增的属性增加到检测序列中

deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值

如果一个属性没有事先声明,后面再增加,他不能检测到变化,对于一些固定的结构,是可以检测到变化的。比如我知道一个obj里面必然有key1、key2属性,我可以事先初始化。如果这些东西是动态的,我没法事先声明。后面再增加,vue没法检测到变化了。

这时将你已经在data中声明的变量和你要赋给这个变量的值作为参数传进该函数就行了

以上这篇vue将对象新增的属性添加到检测序列的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue之Vue.set动态新增对象属性方法
(0)

相关推荐

  • Vue之Vue.set动态新增对象属性方法

    当我们给一个比如props中,或者data中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用Vue.set方法 Vue.set方法用来新增对象的属性.如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新 这里本来food对象是没有count属性的,我们要给其添加count属性就必须使用Vue.set方法,而不能写成'this.food.count = 1' 以上这篇Vue之Vue.set动态新增对象属性方法就是小编分享给大家的全部内容了,希望能给大

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    目录 Vue.$set() Vue.$set()源码 Object.assign() 首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多深入响应式原理 vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化 比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化 data() { return { obj: {} } }, mounted: { t

  • vue给对象动态添加属性和值的实例

    一.背景 介绍:在vue中请求接口中,一个请求方法可能对应后台两个请求接口,所以请求参数就会有所不同.需要我们先设置共同的参数,然后根据条件动态添加参数属性. 二.案例 let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是模考题库 let addQuestionApi = ''

  • vue给对象添加属性没有响应式的问题及解决

    目录 vue给对象添加属性没有响应式 给已创建的vue添加响应式属性 怎么才能添加响应式的属性呢? 总结 vue给对象添加属性没有响应式 vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法. 但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题. 在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • Vue基本使用之对象提供的属性功能

    一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue.filter("RMB1", function(v){ //就是来格式化(处理)v这个数据的 if(v==0){ return v } return v+"元" }) 1.1.2 在Vue对象中通过filters属性类定义 var vm = new Vue({ el:&

  • Vue用v-for给循环标签自身属性添加属性值的方法

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下:  修改内容为 l

  • vue watch关于对象内的属性监听

    vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.log(newval, oldVal) } } vue监听整个对象,如下: •deep: true 深度监测 data: { return { msg: { name: 'hahah', color: 'red' } } } watch: { msg: { handler(newValue, oldVa

随机推荐