v-model 无法更新迭代变量**本身，v-for实现多组单选互不影响

最新推荐文章于 2024-06-17 19:24:18 发布

小达不溜儿

最新推荐文章于 2024-06-17 19:24:18 发布

阅读量1.2w

点赞数 9

分类专栏：前端

本文链接：https://blog.csdn.net/liuhp123/article/details/104412695

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

单选部分用ElementUI组件编写。

有三个地方要注意：

1.单选框绑定click事件没反应，要用组件自带的change事件绑定。

2.如果v-model绑定的是常量，那生成的多组单选，一组变化，其他组会联动一起变化。

3.v-model无法绑定迭代变量，如上图那么写就会报错：

'v-model' directives cannot update the iteration variable 'i' itself.

所以正确写法如下：

<template> 
 <div v-for="(arr,i) in data" :key="i" class="case-array clearfix">
    <div class="case-wrap-option clearfix">
        <div class="case-btn">
          <el-radio-group v-model="radioArr[i]" class="case-radio-group">
            <el-radio class="case-radio" label="1" @change="tag">或</el-radio>
            <el-radio class="case-radio" label="2" @change="tag">且</el-radio>
            <el-radio class="case-radio" label="3" @change="tag">非</el-radio>
          </el-radio-group>
        </div>
    </div>
 </div>
</template>
<script>
export default {
    data () {
      return {
          data:'',
          length:1,  
        }
    },
    method:{
        updateTagDataLength(){
        this.radioArr = [...new Array(this.data.length()).keys()]
      },
  }
}

</script>

但是这么写会出现无法设置默认选项，而且存在删除中间项时，下面的单选组会继承删除那组的选项，如下图：

------------------------------------------------------------------------------------

更新一下：

找到既可以设置默认选项又不会继承删除选项的方法了。

<template>
 <div  class="case-box clearfix">
   <div v-for="(caseArr,i) in data" :key="i" class="case-array clearfix">
     <div class="case-wrap-option clearfix">
       <div class="case-btn">
         <!-- <el-radio-group  class="case-radio-group"> -->
          <el-radio class="case-radio" label="or" v-model="tag[i]" @change="tagContact('or',i,'或',true)">或</el-radio>
          <el-radio class="case-radio" label="and" v-model="tag[i]" @change="tagContact('and',i,'且',true)">且</el-radio>
          <el-radio class="case-radio" label="notin" v-model="tag[i]" @change="tagContact('notin',i,'非',true)">非</el-radio>
         <!-- </el-radio-group> -->
     </div>
    </div>
  </div>
</template>
<script>
export default{
    data(){
        return{
          data:[],//已保存标签展示用
          tag:['or'], //默认选择or
        }
    },
    method:{
        tagContact(type,index,str,boolean){
            this.$set(this.tag,index,type);//将选择的选项添加进来
        },
    }
}
</script>