数据不响应,可能是用法有问题
<template>
<div>
<div>
<span>用户名: {{ userInfo.name }}</span>
<span>用户性别: {{ userInfo.sex }}</span>
<span v-if="userInfo.officialAccount">
公众号: {{ userInfo.officialAccount }}
</span>
</div>
<button @click="handleAddOfficialAccount">添加公众号</button>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: '子君',
sex: '男'
}
}
},
methods: {
// 在这里添加用户的公众号
handleAddOfficialAccount() {
this.userInfo.officialAccount = '前端有的玩'
}
}
}
</script>
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', '前端有的玩')
}
针对数组的特定方式
<template>
<div>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
<button @click="handleChangeName">修改名称</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['张三', '李四']
}
},
methods: {
// 修改用户名称
handleChangeName() {
this.list[0] = '王五'
}
}
}
</script>
上面的代码希望将张三的名字修改为王五,实际上这个修改并不能生效,这是因为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