單個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>

使用正常的點擊事件是無法觸發的，所以要使用@click.native.prevent，這樣就可以觸發按鈕的點擊事件，不過通過點擊事件來處理一些邏輯的時候，就無法觸發自帶的@input事件。

@click.native.prevent

1. 給vue組件綁定事件的時候，組件加上.native就可以監聽原生事件，否則會被認為監聽的是組件內自定義的事件。
2. .prevent是阻止按鈕的預設行為，根據Vue2.0官方文檔關於父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發事件給父組件。但父組件想在子組件上監聽自己的click的話，需要加上native修飾符