vue2添加或删除data中定义对象的属性,界面不更新
1、在vue2中,如果在data函数中定义了一个对象,但是在methods中想要给对象添加/删除属性,直接添加/删除数据会变,但是界面不会变化。2、如果给对象中的数组,通过索引方式修改 界面也不会变化data(){person:{name:'哈哈',age:18,info:['抽烟', '喝酒', '烫头']}},methods:{clickBtn(){this.person.sex = '男'
1、在vue2中,如果在data函数中定义了一个对象,但是在methods中想要给对象添加/删除属性,直接添加/删除数据会变,但是界面不会变化。
2、如果给对象中的数组,通过索引方式修改 界面也不会变化
data(){
person:{
name:'哈哈',
age:18,
info:['抽烟', '喝酒', '烫头']
}
},
methods:{
clickBtn(){
this.person.sex = '男' //如果在模板中使用sex,页面不会显示数据
}
}
添加属性
方案1
this.$set( 对象, 需要新增的属性, 属性值 )
this.$set( person, ‘sex’, ‘男’ )
方案2
1、导入vue
import Vue from ‘vue’
2、Vue.set( 对象, 新增属性, 属性值 )
删除属性
delete person.name 是不会生效的 ,因为definedProperty只有get和set方法,没有新增和删除方法
方案1
this.$delete( 对象, 删除的属性)
this.$delete( person, ‘sex’ )
方案2
1、导入vue
import Vue from ‘vue’
2、Vue.delete( 对象, 删除的属性)
修改数组数据
this.person.info[0] = ‘打球’ 界面不会变化
方案1
this.$set( 对象.数组, 需要修改的索引, 属性值 )
this.$set( this.person.info, 0, ‘打球’ )
方案2
this.person.info.splice( 0, 1, ‘打球’ )
更多推荐
所有评论(0)