vue 关于循环里面添加下拉框或者复选框让v-model绑定的值不一样(数据不包含在循环里面)

81 阅读 0 评论 54 点赞

我是靠谱客的博主知性微笑，这篇文章主要介绍vue 关于循环里面添加下拉框或者复选框让v-model绑定的值不一样(数据不包含在循环里面)，现在分享给大家，希望可以做个参考。

不知道取啥子名字，哎，自定义一个自己能懂的
说明：循环数据时，还需一个复选框 (重点看第二步，其他是为了自己清楚)

前提：为什么要去绑定数组?
在循环里面每次的循环的值应该是不一样的，一样的话，选择一个时，实则已经渲染了全部

1、定义一个变量 checked [ ]

复制代码

1
2
首先在data里面定义一个checked 空数组

**2、绑定数据，复选框 **checked[indexs]

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <el-collapse v-for='(item,indexs) in tableData.types' :key="indexs">
//绑定的值不在循环里面的
<el-checkbox v-model="checked[indexs]" @change="handleCheckedCitiesChange(item.id,indexs)"
</el-checkbox>
<el-collapse-item :title="item.carName"
>
<div class="text item">
<el-form-item label="汽车数量(台)">
<el-input v-model="item.carCount" disabled></el-input>
</el-form-item>
</div>
</el-collapse-item>
</el-collapse>

3 、change 事件来判断复选框this.checked 这个数组是否已选中 indexof
// this.checked里面是true 或者 false
我这里的需求是:判断数组里面是否包含true 没有，改变页面的disabled 为false

复制代码

1
2
3
4
5
6
7
8
9
10
 handleCheckedCitiesChange(value,indexs){
// console.log(this.checked.indexOf(true)) // 判断数组里面是否包含true
if(this.checked.indexOf(true)
== -1){
this.dialogSendData.isAdd = false
}else {
this.dialogSendData.isAdd =true
}
},