Vue 视图与数据不统一问题

84 阅读 0 评论 56 点赞

我是靠谱客的博主风中月亮，这篇文章主要介绍Vue 视图与数据不统一问题，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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)
},
}
}