【vue】数据不响应的问题排除、解决

数据不响应，可能是用法有问题

1. 将本来要新增的属性提前在data中定义好

data() {

return {

userInfo: {

name: '子君',

sex: '男',

// 我先提前定义好

officialAccount: ''

}

}

}

2. 直接替换掉userInfo

this.userInfo = {

// 将原来的userInfo 通过扩展运算法复制到新的对象里面

...this.userInfo,

// 添加新属性

officialAccount: '前端有的玩'

}

3. 使用Vue.set

import Vue from 'vue'

// 在这里添加用户的公众号

handleAddOfficialAccount() {

Vue.set(this.userInfo,'officialAccount', '前端有的玩')

}

针对数组的特定方式

上面的代码希望将张三的名字修改为王五，实际上这个修改并不能生效，这是因为Vue不能检测到以下变动的数组:

当你利用索引直接设置一个项时，例如: this.list[index] = newValue

修改数组的length属性,例如: this.list.length = 0

Vue.set(this.list,0,‘王五’)

this.list.splice(0,1,‘王五’)

Vue对数组的以下方法进行的劫持包装变异，操作数组的时候，调用下面这些方法是可以保证数据可以正常响应

push

pop

shift

unshift

splice

sort

reverse