checkbox问题

method

checkbox自定义数组渲染选择传给后台名称：

<li style="border-right: 1px solid #ECEDEE" v-for="(item,index) in arr" >

<input type="checkbox" class="one" @click.parent="one(item,index)" v-model="item.state">

<label for="one">

<p class="name">{{item.name}}</p>

</label>

</li>

one(val,index,e) {

val.state=!val.state

for(let i=0;i<this.arr.length;i++){

if(i===index){

if(this.arr[i].state){

this.axiosarr[index]=val

}else{this.axiosarr.splice(index,1)}}}}

checkbox通过请求后台数据渲染列表，然后根据选择状态反传状态给后台。

<div class="ones" v-for="(item, index) in aData" :key="index">

<input type="checkbox":id="item.factoryId":value="item.type"@click="one(index,item)">

<label :for="item.factoryId">

<p class="name">{{item.factoryName}}</p>

<p class="explain">点击关联</p>

</label>

</div>

this.$axios({

}).then(res => {

console.log(res.data.data);

res.data.data.forEach(item => {

this.$set(item, 'type', false)

this.aData.push(item)

})})

one(index,item) {

this.aData[index].type = !this.aData[index].type

this.axiosarr = []

this.aData.forEach(item => {

if (item.type) {

this.axiosarr.push(item.factoryId)}})

在遇到多个v-show/v-if控制，后台没有给标识的情况下，自己加索引。

<img v-show="creentIndex==index?!show:show" :src="and+item.licensePath" alt="">

data里定义：creentIndex:-1，show：false

doclick(index){

if( this.creentIndex == index){

//将下标重新赋值成一个不会被选中的下标，从而实现显示隐藏

this.creentIndex = 1000

}else{

this.creentIndex = index}}