vue.jsラジオボタンはデフォルトでチェックされていませんか？

Question

2つのラジオボタンがあります。 vue.jsのv-modelを使用して変数に値をバインドする必要がありますv-modelが追加されると、両方のラジオボタンがチェックされていないと表示されます。

<div class="radio-item"> 
    <input type="radio" id="ritema" name="ritem" value="business" checked v-model="picked"> 
    <label for="ritema">Business </label> 
</div> 

<div class="radio-item"> 
    <input type="radio" id="ritemb" name="ritem" value="public" v-model="picked"> 
    <label for="ritemb">Public</label> 
</div> 

Answer 1

v-modelは、常にデータプロパティを単一の真実のソースとして使用します。

v-modelは、フォーム要素の初期値、チェック済みまたは選択済みの属性を無視します。 Vueインスタンスのデータは常に真実のソースとして扱われます。初期値は、コンポーネントのdataオプションのJavaScript側で宣言する必要があります。

出典：コメントが言ったようにhttps://vuejs.org/v2/guide/forms.html#Basic-Usage

、あなたは自分のVueのインスタンスに選んだの値に仕事をしなければなりません。

data() { 
    return { 
     picked: "business" 
    }; 
}