取消选中单选按钮

新手上路,请多包涵

我正在尝试使用一组单选按钮设置一个简单的 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 许可协议

阅读 583
2 个回答

困难在于 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 许可协议

这是一个简单的方法,不使用 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题