Vue カスタム チェックボックス コンポーネントを作成する正しい方法
<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>
