選択した値の配列にバインドされた Vue 3 カスタム チェックボックス コンポーネント

Question

スタイル付きのチェックボックスと対応するラベルを備えた単純なコンポーネントを作成しようとしています。選択されたすべてのチェックボックスの値（文字列）は配列に保存される必要があります。これはプレーン HTML チェックボックスで機能します:

リーリー

これにより、次の望ましい状況が得られます:

ここで、これらのチェックボックスをカスタム チェックボックス コンポーネントに置き換えると、機能しません。ボックスにチェックを入れると、出力される値が status 配列に追加または削除されるのではなく、配列を置き換えるようになり、結果は次のようになります:

したがって、何らかの理由でデフォルトではすべてのチェックボックスがオンになっており、そのうちの 1 つをクリックするとすべてのチェックが外され、status の値が false になり、任意のチェックボックスを再度クリックします。すべてのチェックボックスを選択し、status true にします。

エミッションでボックスがチェックされているかどうかを返すと true または false の値が返されることはわかっていますが、Vue がネイティブ チェックボックスでこれをどのように行うのか、またコンポーネントでこの動作を実現する方法がわかりません。

これはチェックボックス コンポーネントのコードです:

リーリー

そして、親コンポーネントは別のテンプレートを使用するだけです:

リーリー

StevenSiebert によるこの回答を見ようとしましたが、オブジェクトを使用しており、ネイティブのチェックボックスを使用して元の Vue の動作を複製したいと考えています。

また、v-model にある Vue の公式ドキュメントも参照しましたが、これがネイティブ チェックボックスとコンポーネントの場合で異なる動作をする理由がわかりません。

Answer 1

各チェックボックスの v-model は同じであり、次のコード スニペットのようになります:

リーリー リーリー