如何在Vuejs中将单选按钮设置为选中状态
如何在Vuejs中将单选按钮设置为选中状态
提问于 2017-10-07 08:27:51
我有一个选项列表，其中一个选项被选中。如何在Vuejs2中测试，并将适当的设置为选中。例如，希望将每瓦特设置为下面的checked (https://jsfiddle.net/bsj1t2z9/2/)
html：
<div id='app'></div>Vue应用程序：
new Vue({
el:"#app",
template:`<div>
saying hello
<div>{{selected_unit}}</div>
<div class="radio" v-for="pricingUnit in pricing_units">
<label><input type="radio" name="pricing[unconfirmed_units]" >{{pricingUnit.display}}</label>
</div>
</div>
`,
data: {
selected_unit:'per_watt',
pricing_units: [
{short:'per_watt', display:'Per Watt'},
{short:'flat_rate', display:'Flate Rate'}
]
}
})回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-07 08:47:32
https://vuejs.org/v2/guide/forms.html#Radio是Vue.js文档中的一个很好的例子
这是你的小提琴的一个工作版本，记住对元素属性使用v-bind。您的问题的答案很简单，就是在迭代的单选按钮中添加一个v-model。
PS:你的name值不起作用，有了我帮你做的，我想你应该能解决这个问题，提示: v-bind
new Vue({
el:"#app",
template:`<div>
<div>{{selected_unit}}</div>
<div class="radio" v-for="pricingUnit in pricing_units">
<label>
<input type="radio"
v-model="selected_unit"
v-bind:value="pricingUnit.display"
name="pricing[unconfirmed_units]" >
{{pricingUnit.display}}
</label>
</div>
</div>
</div>`,
data: {
selected_unit:'per_watt',
pricing_units: [
{short:'per_watt', display:'Per Watt'},
{short:'flat_rate', display:'Flate Rate'}
]
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46615538
复制相关文章
相似问题
腾讯云开发者
