web-dev-qa-db-ja.com

vuejsラジオボタンコンポーネント

このカスタムラジオボタンコンポーネントを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" />
radio-buttonvue.jsvue-component
10
Walraz

ラジオボタンの場合、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">
_

注意：

  1. ボタンlabelは、ラジオボタンの値です。これは、特定のラジオボタンをクリックしたときにselectedValueに設定すると予想されるものです。

  2. 子コンポーネントの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に変更されると、ラジオボタンは自動的に更新されます。

それが役に立てば幸い！

12
Mani

個人的には、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>

https://jsfiddle.net/Zyfraglover/ndcp8t6e/

1
ZyDucksLover