Question

我有一个选项列表，其中一个已被选中。我将如何在Vuejs2中进行测试并将其设置为已选中的相应项。例如，希望每瓦特设置为checked以下<div id='app'></div>

HTML：

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'}
    ]
  }
})

Vue app：

 SELECT courses.name, registrations.ID, registrations.name, registrations.course registrations.adress 
FROM registrations 
INNER JOIN courses 
ON courses.ID = registrations.course

Answer 1

Vue.js文档有一个很好的例子：https://vuejs.org/v2/guide/forms.html#Radio

这是你的小提琴的工作版本，记得使用v-bind作为元素属性。您的问题的答案只是将v模型添加到迭代的单选按钮。

PS：你的名字值不起作用，我已经帮助你了，我认为你应该能够解决这个问题，提示：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'}
    ]
}
})

如何在Vuejs中设置单选按钮

1 个答案: