vue.js（およびv-model）を使用して値を知らずに最初のラジオボタンを選択する方法

Question

私の場合、ラジオボタンは当初はサーバーによって動的にレンダリングされます。クライアント側では、v-modelを使用して値の変更と関連するロジックを処理したいと考えています。問題は、最初のボタンをあらかじめ選択したいのですが、クライアント側ではその値が分かりません。 vue.jsでこれを行うための推奨される方法は何ですか？必要であれば、サーバーはそれに対していくつかの "ヒント"を生成することができます。

私はしばらく検索してきましたが、私が見たすべての作業ソリューションは、データが既に存在すると仮定しています。私が考えることのできる方法の1つは、APIのボタンの値を返すようにすることですが、これは過度の気持ちになります。

JSFiddle

Answer 1

あなたは、最初のラジオボタンの値に対する成分のmountedフックにrの初期値を設定することができます。

mounted() { 
    this.r = this.$el.querySelector('input[type="radio"]').value; 
} 

しかし、固定されたテンプレートを使用する方がよいかもしれません最初にサーバーによってレンダリングされないコンポーネントの場合HTMLをレンダリングする代わりに、必要な項目のデータを含むJavaScriptをレンダリングし、そのデータをテンプレートにバインドすることができます。

Vueは、テンプレートがデータの代わりに生成されるときに最も効果的です。

<script> 
    // Rendered by the server external to the Vue component, 
    // otherwise just render directly into the component's data 
    window.items = [ 
    { label: 'Apple', value: 'apple' }, 
    { label: 'Orange', value: 'orange' }, 
    ]; 
</script> 

<label> 
    <input v-model="selected" v-for="item of items" type="radio" :value="item.value"> 
    {{ item.label }} 
</label> 

new Vue({ 
    el: "#app", 
    data: { 
    items: window.items, 
    selected: window.items[0].value, 
    }, 
});