取消选中单选按钮

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>

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

更接近数据的方法是根据您的选择进行计算，并让其设置器检查重新选择。没有点击处理程序。一切都在设置值的正常过程中处理。

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>