取消选中单选按钮 [英] Uncheck radio button

问题描述

我正在尝试使用一组单选按钮设置一个简单的Vue实例。目标是，如果用户点击已经选中的单选按钮，它将取消选中相应的单选按钮。但我还不能用Vue做到这一点。这是我到目前为止的代码：

I'm trying to set up a simple Vue instance with a collection of radio buttons. The goal is that, if the user clicks on a radio button that is already checked, it will uncheck the respective radio button. But I couldn't do this using Vue yet. Here's my code so far:

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;
            }
        }
})

似乎比如调用取消选中方法，但单选按钮会触发更改事件，然后更新<$的值c $ c>再次选择。 uncheckAll 方法按预期工作，可能是因为它没有使用 v-model 绑定到数据。

Seems like the uncheck method is called, but then the radio button triggers a change event and then updates the value of selected again. uncheckAll method works as expected, probably because it's not tied to the data using v-model.

任何有关此工作的提示或建议？这是我为此示例创建的一支笔： https://codepen.io/diegoliv/pen/JrPBbG

Any tips or suggestions to make this work? Here's a pen I created for this example: https://codepen.io/diegoliv/pen/JrPBbG

推荐答案

难点在于 v-model 正在改变值选择，然后才能检查它以查看其先前的值。你需要另一个变量。

The difficulty is that v-model is changing the value of selected before you can examine it to see what its previous value is. You need another variable.

这个想法是：当你点击一个项目时，它会检查它是否匹配 previousSelected （而不是选择）。如果匹配，则取消选择。然后将 previousSelected 设置为选择的值。

The idea is: when you click an item, it checks whether it matches previouslySelected (rather than selected). If it matches, unselect. Then set previouslySelected to the value of selected.

单击处理程序应该在输入上，而不是在标签上;无论如何，标签的功能是将点击转发到输入。

The click handler should be on the input, not on the label; it is the function of the label to forward clicks to the input, anyway.

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>

注意：以下方法不适用于Vue 2.5或更高版本，因为单击已选择的无线电不会导致设置发生。（感谢Vlad T.在评论中）

Note: the below method does not work with Vue 2.5 or later because clicking an already-selected radio does not cause a set to happen. (thanks to Vlad T. in the comments)

接近它的更多数据方式是根据您的选择进行计算，让其设定者进行检查重新选择。无点击处理程序。在设置值的正常过程中处理所有内容。

A more in-the-data way of approaching it would be to have a computed based on your selected, and have its setter do the check for re-selecting. No click handler. Everything is handled in the normal course of setting the value.

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>

这篇关于取消选中单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！