Vue カスタム チェックボックス コンポーネントを作成する正しい方法

Question

<p>Vue でカスタム チェックボックスを作成する方法。チェックボックスが変更されると、関数が呼び出されます。 「未定義のプロパティ 'id' を読み取れません」というエラーが発生しました 警告「ネイティブ イベント ハンドラーの実行中に未処理のエラーが発生しました」</p> <p>カスタム チェックボックス:</p> <pre class="brush:js;toolbar:false;"><テンプレート> <div class="フィルター"> <入力 :ref="id" :id="ID" type="チェックボックス" class="フィルターチェックボックス" @change="$emit('do', $emit)" /> <span>{{ ラベル }}</span> </div> </テンプレート> <スクリプト> デフォルトのエクスポート { 名前: "チェックボックス", 小道具: { ラベル: { タイプ: 文字列 }、 isSelected: { タイプ: ブール値 }、 ID: { タイプ: 文字列 } }、 } </script></pre> <p>これを親コンポーネントで使用したい: </p> <p> <pre class="brush:js;toolbar:false;"><チェックボックス v-for="フィルターの中のフィルター" :key="フィルター.id" :label="フィルター.名前" :id="フィルター.id" v-model="フィルター.選択" @do="相互排他的(filter.id)" /> </p>

Answer 1

未定義および未処理のエラーは繰り返すことができないため、さらにデバッグする必要があります。

しかし、emit 関数を発行していますが、これは奇妙で、チェックされているかどうかに関係なく、値は常に filter.id です。

次のようなことを行うとよいでしょう:

リーリー リーリー