使用Vue.js处理复选框时,如何使用Enter键?
P粉106301763
P粉106301763 2023-08-26 18:35:03
[Vue.js讨论组]
<p>我正在学习Vue.js。在我的应用程序中,我创建了一个带有多个复选框和搜索功能的表单。当用户使用Tab键聚焦复选框并按Enter键时,应该选中复选框。</p> <pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;div&gt; &lt;div v-for=&quot;(ingredient, index) in filteredIngredients&quot; :key=&quot;index&quot; class=&quot;list-group-item px-md-4&quot;&gt; &lt;div class=&quot;row px-3&quot;&gt; &lt;div class=&quot;col-auto&quot;&gt; &lt;input v-model=&quot;ingredient.checkbox&quot; class=&quot;form-check-input&quot; type=&quot;checkbox&quot; @focus=&quot;checkFocus&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;col ps-0&quot;&gt; &lt;span class=&quot;mb-2 d-block text-gray-800&quot;&gt; &lt;strong class=&quot;text-black-600&quot;&gt;{{ ingredient.name }}&lt;/strong&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { methods: { methods: { checkFocus(event) { // 这里我能做什么 }, }, }, } &lt;/script&gt; </pre>
P粉106301763
P粉106301763

全部回复(1)
P粉731977554

如果你想用你自己的方法来做,你可以这样做。

export default {
  data() {
    return {
      filteredIngredients: [
        {name: "paper", checkbox: false},
        {name: "salt", checkbox: false}
      ]
    }
  },
  methods: {
    checkFocus(index) {
      this.filteredIngredients[index].checkbox = true;
    },
  }
}
<template>
  <div class="list-group-item px-md-4" v-for="(ingredient,index) in filteredIngredients" :key="index">
      <div class="row px-3">
          <div class="col-auto">
              <input
                class="form-check-input"
                type="checkbox"
                @keyup.enter="checkFocus(index)"
                v-model="ingredient.checkbox"
              />
          </div>
          <div class="col ps-0">
              <span class="mb-2 d-block text-gray-800">
                  <strong class="text-black-600">{{ingredient.name}}</strong>
              </span>
          </div>
      </div>
  </div>
</template>

如果你想使用回车键来做,你可以使用@keyup.enter代替@focus

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号