如何設置一個單選按鈕Vuejs

我有一個選項列表，其中一個被選中。我將如何在Vuejs2中進行測試並將其設置爲適當的選項。例如，每瓦組想要如下面checked（https://jsfiddle.net/bsj1t2z9/2/）如何設置一個單選按鈕Vuejs

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

來源

2017-10-07 timpone

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

下面是你的小提琴的工作版本，記得要使用v-bind作爲元素屬性。您的問題的答案只是添加一個V模型到迭代單選按鈕。

PS：你的名字價值不工作，與我有什麼幫助了你，我認爲你應該能夠得到這個固定的，提示：V-綁定

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

來源

2017-10-07 00:47:31 Henkers

何樂不爲？ https://jsfiddle.net/bsj1t2z9/3/ – timpone

如果你更直接地問我一個問題，這會有所幫助，但我認爲你想要默認選擇一個單選按鈕。如果我們改變我們綁定到每個對象的短屬性的值，我們可以使這個工作。在你剛剛鏈接的例子中，你仍然沒有使用V模型。我建議你查看我的解決方案並將其與您的解決方案進行比較。這是一個工作版本的默認值：https://jsfiddle.net/Henkers/y4ear9xu/ – Henkers

thx - 是的，在我們的應用程序，我們不需要v型更新（它實際上會導致一個問題，因爲在一個模態疊加）。 thx尋求幫助 – timpone

如何設置一個單選按鈕Vuejs

回答

相關問題