Vue.js を使用してチェックボックスを操作するときに Enter キーを使用するにはどうすればよいですか?
P粉106301763
2023-08-26 18:35:03
<p>Vue.js を学んでいます。私のアプリケーションでは、複数のチェックボックスと検索機能を備えたフォームを作成しました。ユーザーが Tab キーを使用してチェックボックスにフォーカスし、Enter キーを押すと、チェックボックスが選択される必要があります。 </p>
<pre class="brush:html;toolbar:false;"><テンプレート>
<div>
<div v-for="(成分, インデックス) in filteredIngredients" :key="index" class="list-group-item px-md-4">
<div class="行 px-3">
<div class="col-auto">
<input v-model="成分.チェックボックス"
class="フォームチェック入力"
type="チェックボックス"
@focus="チェックフォーカス"
/>
</div>
<div class="col ps-0""
<span class="mb-2 d-block text-gray-800">
<strong class="text-black-600">{{ 成分.名 }}</strong>
</span>
</div>
</div>
</div>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
メソッド: {
メソッド: {
checkFocus(イベント) {
//ここで何ができるでしょうか？
}、
}、
}、
}
</スクリプト>
</pre>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
独自の方法で実行したい場合は、これを実行できます。
Enter キーを使用してこれを行う場合は、@focus の代わりに @keyup.enter を使用できます。