单个el-radio点击选中取消

  • 单个el-radio点击选中取消已关闭评论
  • 70 次浏览
  • A+
所属分类:Web前端
摘要

el-radio中,已经选中的按钮无法通过再次点击去取消选择,所以要满足条件需要改变成对应的点击事件。


el-radio

el-radio中,已经选中的按钮无法通过再次点击去取消选择,所以要满足条件需要改变成对应的点击事件。

<template>   <div id="app">     <el-radio       v-model="radio"       :label="true"       @click.native.prevent="change(radio)"     >       备选项     </el-radio>   </div> </template>  <script> let map; export default {   data() {     return {       radio: true,     };   },   methods: {     change(value) {       this.radio = value === true ? false : true;     },   }, }; </script> 

单个el-radio点击选中取消
单个el-radio点击选中取消
单个el-radio点击选中取消
单个el-radio点击选中取消
使用正常的点击事件是无法触发的,所以要使用@click.native.prevent,这样就可以触发按钮的点击事件,不过通过点击事件来处理一些逻辑的时候,就无法触发自带的@input事件。

@click.native.prevent

  1. 给vue组件绑定事件的时候,组件加上.native就可以监听原生事件,否则会被认为监听的是组件内自定义的事件。
  2. .prevent是阻止按钮的默认行为,根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符