我正在尝试使用一组单选按钮设置一个简单的 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 许可协议
困难在于
v-model
正在更改selected
的值,然后才能检查它以查看其先前的值是什么。你需要另一个变量。这个想法是:当你点击一个项目时,它会检查它是否匹配
previouslySelected
(而不是selected
)。如果匹配,则取消选择。然后将 --- 设置为selected
previouslySelected
的值。click
处理程序应该在输入上,而不是在标签上;无论如何,标签的功能是将点击转发到输入。注意:以下方法不适用于 Vue 2.5 或更高版本,因为单击已选择的无线电不会导致
set
发生。 (感谢评论中的 Vlad T.)一种更接近数据的方法是根据您的选择进行计算,并让其设置器进行重新选择的检查。没有点击处理程序。一切都在设置值的正常过程中处理。