このカスタムラジオボタンコンポーネントをvuejsで動作させるようにしています。親コンポーネントの値でラジオボタンをチェックするにはどうすればよいですか。私はあなたがv-modelを使用していて、入力値の1つで同じ値に設定していることを知っていますが、機能しないようです。
成分:
export default Vue.component('radioButton', {
template,
props: ['name', 'label', 'id', 'value']
})
コンポーネントテンプレート:
<label class="radio" :for="id">
<input type="radio" :id="id" class="radio-button" :value="value" :name="name">
<span class="radio-circle">
</span>
<span class="radio-circle__inner">
</span>
<span class="radio-button__label">{{ label }}</span>
</label>
html:
<radio-button name="options" id="option-1" label="1" :value="selectedValue" />
<radio-button name="options" id="option-2" label="2" :value="selectedValue" />
ラジオボタンの場合、checkedプロパティをtrueまたはfalseに渡して、ある状態にプリセットする必要があります。または、_v-model
_の値をラジオボタンのvalue
と等しくして、チェックされるようにする必要があります。
あなたが投稿した限られたサンプルコードでは、あなたのラベルは_1
_、_2
_、_3
_などのボタンインデックスであると思います...そして、次のいずれかを選択したいと思いますselectedValue
がそのラジオボタンのlabel
と一致する場合のボタン。たとえば、selectedValueが2の場合、ラジオボタン2をオンにする必要があります。
上記が正しいと仮定すると、_radio-button
_コンポーネントテンプレートを1行変更する必要があります。
_<input type="radio" class="radio-button" :value="label" :name="name" v-model="value">
_
注意:
ボタンlabel
は、ラジオボタンの値です。これは、特定のラジオボタンをクリックしたときにselectedValueに設定すると予想されるものです。
子コンポーネントのvalue
は、実際には親コンポーネントのselectedValue
であり、現在選択されているラジオボタンを示します。これは_v-model
_に入るはずです
したがって、 Form Input Bindings のドキュメントに従って、v-model変数がそのラジオボタンの値と等しい場合、ラジオボタンがチェックされます。
しかし、ここで別の問題があります。別のラジオボタンをクリックすると、親コンポーネントのselectedValue
が変更されることが予想されます。 props
は一方向のバインディングのみを提供するので、それは起こりません。
この問題を解決するには、子コンポーネント(ラジオボタン)から$ emitを実行して、親コンポーネント(フォーム)にキャプチャする必要があります。
これが実際のjsFiddleの例です: https://jsfiddle.net/mani04/3uznmk72/
この例では、フォームテンプレートでラジオボタンコンポーネントを次のように定義しています。
_<radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/>
<radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/>
_
子コンポーネント内で値が変更されると、親フォームコンポーネントのchangeValue()
メソッドに渡されるラジオボタンのラベルとともに「変更」イベントが渡されます。親コンポーネントがselectedValue
に変更されると、ラジオボタンは自動的に更新されます。
それが役に立てば幸い!
個人的には、vモデルディレクティブを保持し、@ changeイベント(他のロジックを実行する必要がある場合は@inputで置き換えることができます)を回避するために、別の方法で行います。ここで重要なのは、vモデルの値がラジオボタンコンポーネントの「値」の小道具に等しいことです。
props: {
value: {},
v_value: {},
....
}
つまり、実際の現在の値を渡していくつかのチェックを行い、ラベルをクリックしたとき、またはラベルがない場合は入力を変更したときに$ emitするだけです。
<label :for="id" @click="$emit('input', v_value)">
<input type="radio" :value="label" :name="name" :id="id" /> {{ label }}
</label>
カスタムラジオボタンが必要な場合に備えて、シンプルなhtmlマークアップ付きのバージョンも追加しました(ただし、コメントを付けました)。
<div class="label" @click="$emit('input', v_value)">
<span>{{ label }}</span>
</div>