iview的radio取消选中

<template>
  <div style="padding:50px">
    <div v-for="(item,index) in list" :key="index">
      <span style="width:100px;display:inline-block;font-size:18px;">{{item.name}}</span>
      <Radio size="large" ref="radio" @click.native="changeRadioStatus(index,item)"></Radio>
    </div>

  </div>
</template>

<script>
export default {
  name: "cancelRadio",
  data() {
    return {
      list:[
        {name:'1',isChecked:false},
        {name:'2',isChecked:false},
        {name:'3',isChecked:false},
        {name:'4',isChecked:false},
        {name:'5',isChecked:false},
        {name:'6',isChecked:false},
        {name:'7',isChecked:false},
        {name:'8',isChecked:false},
        {name:'9',isChecked:false},
        {name:'10',isChecked:false},
        {name:'11',isChecked:false},
        {name:'12',isChecked:false},
      ],
    }
  },
  methods:{
    changeRadioStatus(index,item) {
      this.$refs.radio[index].currentValue = !this.$refs.radio[index].currentValue
      console.log("获取到选中的状态和名字",item.name,this.$refs.radio[index].currentValue)
    }
  }
}
</script>

<style scoped>
>>> .ivu-radio-inner::after {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: 2px;
  border-radius: 6px;
  display: table;
  border-top: 0;
  border-left: 0;
  content: ' ';
  background-color: #1dc138;
}
>>> .ivu-radio-checked .ivu-radio-inner {
  border-color: #1dc138;
}
</style>

1、使用原生的点击事件
2、通过属性currentValue来控制是否选中

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容