取消選中單選按鈕

Question

我試圖用單選按鈕的集合來設置一個簡單的Vue實例。目標是，如果用戶點擊已經選中的單選按鈕，它將取消選中相應的單選按鈕。但我不能用Vue做這個。這裏是我到目前爲止的代碼：

HTML：

<div id="app"> 
    <div v-for="(val, key) in list"> 
     <input type="radio" name="radio" :value="val" v-model="selected" :id="val"> 
     <label :for="val" @click="uncheck(val)">{{ val }}</label> 
    </div> 
    <button @click="uncheckAll">Uncheck all</button> 
</div> 

JS：

var app = new Vue({ 
     el: '#app', 
     data : { 
      list: [ 'one', 'two', 'three' ], 
      selected: 'two', 
     }, 
     methods : { 
      uncheck: function(val){ 
       console.log(val, this.selected); 
       if (val == this.selected){ 
        this.selected = false; 
       } 
      }, 
      uncheckAll: function(){ 
       this.selected = false; 
      } 
     } 
}) 

好像uncheck方法被調用，但隨後的單選按鈕觸發change事件，然後更新該值再次selected。 uncheckAll方法按預期工作，可能是因爲它沒有綁定到使用v-model的數據。

任何提示或建議，使其工作？這是我在這個例子中創建了一個筆：https://codepen.io/diegoliv/pen/JrPBbG

Answer 1

的困難在於v-model正在改變的價值selected之前，你可以檢查它看看它以前的價值是什麼。你需要另一個變量。

這個想法是：當你點擊一個項目，它檢查它是否匹配previouslySelected（而不是selected）。如果匹配，請取消選擇。然後將previouslySelected設置爲值selected。

click處理程序應該在輸入上，而不是在標籤上;無論如何，標籤的作用是將點擊轉發到輸入。

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    list: ['one', 'two', 'three'], 
 
    selected: 'two', 
 
    previouslySelected: 'two' 
 
    }, 
 
    methods: { 
 
    uncheck: function(val) { 
 
     if (val === this.previouslySelected) { 
 
     this.selected = false; 
 
     } 
 
     this.previouslySelected = this.selected; 
 
    }, 
 
    uncheckAll: function() { 
 
     this.selected = false; 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="(val, key) in list"> 
 
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val" @click="uncheck(val)"> 
 
    <label :for="val">{{ val }}</label> 
 
    </div> 
 
    <button @click="uncheckAll">Uncheck all</button> 
 
</div>

接近它時將有一個計算根據您的選擇，並有其二傳手做重新選擇檢查的更加的數據的方式。沒有點擊處理器。一切都在設定值的正常過程中處理。

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    list: ['one', 'two', 'three'], 
 
    d_selected: 'two' 
 
    }, 
 
    computed: { 
 
    selected: { 
 
     get() { 
 
     return this.d_selected; 
 
     }, 
 
     set(v) { 
 
     if (v === this.d_selected) { 
 
      this.d_selected = false; 
 
     } else { 
 
      this.d_selected = v; 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    uncheckAll: function() { 
 
     this.d_selected = false; 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="(val, key) in list"> 
 
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val"> 
 
    <label :for="val">{{ val }}</label> 
 
    </div> 
 
    <button @click="uncheckAll">Uncheck all</button> 
 
</div>

Answer 2

可以使用prevent modifier防止點擊標籤的默認行爲：

<label :for="val" @click.prevent="uncheck(val)">{{ val }}</label> 

Here's a working Codepen.