スタイル付きのチェックボックスと対応するラベルを備えた単純なコンポーネントを作成しようとしています。選択されたすべてのチェックボックスの値(文字列)は配列に保存される必要があります。これはプレーン HTML チェックボックスで機能します:
リーリーこれにより、次の望ましい状況が得られます:
ここで、これらのチェックボックスをカスタム チェックボックス コンポーネントに置き換えると、機能しません。ボックスにチェックを入れると、出力される値が status
配列に追加または削除されるのではなく、配列を置き換えるようになり、結果は次のようになります:
したがって、何らかの理由でデフォルトではすべてのチェックボックスがオンになっており、そのうちの 1 つをクリックするとすべてのチェックが外され、status
の値が false
になり、任意のチェックボックスを再度クリックします。すべてのチェックボックスを選択し、status
true
にします。
エミッションでボックスがチェックされているかどうかを返すと true または false の値が返されることはわかっていますが、Vue がネイティブ チェックボックスでこれをどのように行うのか、またコンポーネントでこの動作を実現する方法がわかりません。 p>
これはチェックボックス コンポーネントのコードです:
リーリーそして、親コンポーネントは別のテンプレートを使用するだけです:
リーリーStevenSiebert によるこの回答を見ようとしましたが、オブジェクトを使用しており、ネイティブのチェックボックスを使用して元の Vue の動作を複製したいと考えています。
また、v-model
にある Vue の公式ドキュメントも参照しましたが、これがネイティブ チェックボックスとコンポーネントの場合で異なる動作をする理由がわかりません。