使用Vue.js处理复选框时，如何使用Enter键？
P粉106301763
2023-08-26 18:35:03
<p>我正在学习Vue.js。在我的应用程序中，我创建了一个带有多个复选框和搜索功能的表单。当用户使用Tab键聚焦复选框并按Enter键时，应该选中复选框。</p>
<pre class="brush:html;toolbar:false;"><template>
<div>
<div v-for="(ingredient, index) in filteredIngredients" :key="index" class="list-group-item px-md-4">
<div class="row px-3">
<div class="col-auto">
<input v-model="ingredient.checkbox"
class="form-check-input"
type="checkbox"
@focus="checkFocus"
/>
</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>
</div>
</template>
<script>
export default {
methods: {
methods: {
checkFocus(event) {
// 这里我能做什么
},
},
},
}
</script>
</pre>
如果你想用你自己的方法来做，你可以这样做。
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。