element ui radio组件添加点击可取消选中状态

有人会问：既然要取消选中为什么不用checkbox呢？
举个栗子，比如选中性别时，用户可以选男或者女(二选一)，然后也可以取消选中(二者都不选)
这时这个demo就派上用场了

<el-radio-group v-model=”area”>
<el-radio @click.native.prevent=”clickitem(item.AreaName)” :label=”item.AreaName” v-for=”(item,index) in areaItem” :key=”index”>{{item.AreaName}}</el-radio>
</el-radio-group>
<!–
如果直接@click会触发两次 默认有change事件
@click.native.prevent 加上这个阻止默认事件
–>

<script>
export default {
data () {
return {
area: ”,
areaItem:[
{AreaName: “东北”, ID: 1},
{AreaName: “华南”, ID: 2},
{AreaName: “西北”, ID: 3}
]
};
},
methods:{
clickitem(e){
if(e===area){
this.area = ” //如果点击的对象是area就将v-model的值清空 radio状态为空
}else{
this.area = e //否则就把点击的值赋值给area 即绑定的radio
}
}
}
}
</script>