web-dev-qa-db-ja.com

Vue vモデルはBS4ラジオボタングループと反応しません

私はこれを長い間見てきたので、単純なものが欠けているだけだと思っていますが、私は困惑しています。

入力がvuejsにバインドされたフォームがあります。 「性別」を選択するための2つのラジオボタンのグループがあり、バインディングは完全に機能しています。いずれかのラジオボタンをクリックすると、vueコンポーネントインスペクターでデータの変更を確認できます。

しかし、ラジオボタンをBootstrap 4ボタングループに変更しようとしていますが、v-modelバインディングを機能させることができないようです。何を試しても、gender_id inボタングループのいずれかのボタンをクリックしても、私のvueデータが更新されません。

フォームの入力値はvueコンポーネントのプロパティを介して入力されますが、簡単にするために、ラジオボタン/ボタングループのデータは次のようになります。

export default {
    data() {
        return {
            genders: {
                1: "Men's",
                2: "Women's"
            },
            gender_id: {
                type: Number,
                default: null
            }
        }
    }
}

これが私が持っているラジオボタンバージョン（正しく機能している）のコードです：

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
            <input type="radio"
                class="form-check-input"
                name="gender_id"
                :id="'gender_' + key"
                :value="key"
                v-model.number="gender_id">
            <label class="form-check-label" :for="'gender_' + key">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

これは、vueのgender_idデータに適切にバインドされていないボタングループのバージョンです。

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
                <input type="radio"
                    class="btn-group-toggle"
                    name="gender_id"
                    :id="'gender_' + key"
                    :value="key"
                    autocomplete="off"
                    v-model.number="gender_id">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

これを機能させるために、次のBoostrap4ドキュメントを使用しています。 https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

ボタングループのドキュメントには、ラジオ入力のvalueプロパティも含まれていませんが、フォームラジオボタンのドキュメントには含まれています。 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

これは簡単にするためですか、それともラジオボタンのボタングループはチェックされたボタンの値を返さないのですか？

ボタングループがラジオボタンとして機能することを意図していないと述べている他のスレッドがありますが、それがBS4に当てはまる場合、参照されているドキュメントにあるように、なぜBootstrapラジオボタン付きのボタングループがあるのですか？上記？チェックされた状態を取得できない場合は、<button>の代わりに<label><input type=radio></label>を使用しないのはなぜですか？

私が間違っていることや正しく理解していないことについてのアイデアはありますか？

本当にありがとう！

vue.jsradio-buttonvuejs2bootstrap-4buttongroup
10
CICSolutions

有益な洞察を提供してくれた@ebbishopに感謝します。

この問題は、vueとbootstrapの両方が、ボタングループのボタンにJavaScriptを適用しようとしていることに関連していました。

この問題を回避するには、ボタングループからdata-toggle="buttons"を削除するだけで済みました。 data-toggle属性を削除することにより、bootstrap jsは適用されず、vueはボタングループを管理できます。

19
CICSolutions

ここでのv-modelの使用に実際に問題はありません。

ただし、各ラジオボタン"active"をラップする<label>にクラス<input>を追加する必要があります。

実用的な例については、 このフィドル を参照してください。

それはあなたが求めているものですか？

3
ebbishop