Vue 视图与数据不统一问题

这里记录的是 vue视图与data中数据不一致的 问题希望可以帮到你，上代码。 做的是一个选择框在后端有数据的情况下复现的功能

<Select
size="large"
style="margin-bottom:10px;"
class="common-select-multiple"
filterable
v-model="joinPerson[0].userId"
@on-change="selectJoinPerson($event,0)"
>
<Option
v-for="(item) in cityList"
:key="item.userId"
:value="item.userId"
>{{ item.userName}}</Option>
</Select>
export default {
data() {
return {
joinPerson: [{
userId: '0001'
},{
userId: '0001'
},{
userId: '0001'
}],
created(){
//获取已选择的数据
init(){
this.$axios(data).then(res =>{
this.joinPerson =res.data
Vue.set(this.joinPerson,0,res.data[0])
//使用set
})
}
},
methods: {
selectJoinPerson(value,e) {
this.joinPerson[e].userId = value
this.joinPerson[e].caseId = this.$route.query.caseId
this.joinPerson[e].code = 2
console.log(this.joinPerson)
},
}
}

这里 我在created中去获取后端的数据，拿到后页面与控制台的数据是不一致的，控制台的数据是最新的也就是后端的。但是页面上还是一开始我在data中定义的内容。这里我们就需要使用vue官方提供的vue.set方法触发响应 去更新到视图中去。官方讲解传送门

最后

以上就是风中月亮为你收集整理的Vue 视图与数据不统一问题的全部内容，希望文章能够帮你解决Vue 视图与数据不统一问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。