取消选中单选按钮

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>

记者：

 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

原文由 Diego de Oliveira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

困难在于 v-model 正在更改 selected 的值，然后才能检查它以查看其先前的值是什么。你需要另一个变量。

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

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 或更高版本，因为单击已选择的无线电不会导致 set 发生。 （感谢评论中的 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>

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个简单的方法，不使用 v-model ，只需要一个变量来存储当前选择的值。

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

 <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" :checked="selected===val" :id="val" @click="uncheck(val)" :key="'input' + key">
    <label :for="val" :key="'label' + key">{{ val }}</label>
  </div>
</div>

原文由 spff 发布，翻译遵循 CC BY-SA 4.0 许可协议