按下回车输入后，Vuejs在下一个按钮中生成点击事件

Question

我遇到了一个很奇怪的案例。

我已经构建了一个非常简单的示例来展示我的问题。

我有 3 个文件：App.vue、todo2.vue、todoI.vue。 App.vue 有 1 个组件（todo2.vue）。 todo2.vue 有 1 个组件 (todoI.vue)。

你会在todo2和todoI的代码下找到。

我面临的问题是，当我在输入文本 id #checkboxAdd 中按下回车键时，它会在下一个按钮上触发一个事件。

在下面的代码中，当在输入文本#checkboxAdd 中按下回车键时，它会在我的 todoI 按钮的第一次迭代中触发 click 事件，在我的示例中调用函数 del (@click="del()")，它是 console.log(this) ，记录组件 todoI 的第一次迭代。

更奇怪的是，当我在输入文本之后添加一个按钮时，给console.log添加一个@click事件，它确实被调用了（而不是调用todoI第一次迭代的按钮）。

有人明白为什么会这样吗？这是我做错了吗？

todo2.vue：

<template>
    <div class="d-flex flex-column">
        <div>
            <form @submit.prevent="">
                <div class="mb-3 input-group">
                    <div class="input-group-text">
                        <input type="checkbox" class="form-check-input" id="checkboxAdd" aria-describedby="checkboxAdd">
                    </div>
                    <input type="text" class="form-control" id="inputAdd" aria-describedby="inputAdd" v-model="tempI">
                </div>
                <ul class="list-group">
                    <todoI v-for="(it, k) in todos" v-model="it.v" :key="k" @delItem="del(it)"></todoI>
                </ul>
                <br>
            </form>
        </div>
    </div>
</template>

<script>

import todoI from './todoI.vue'

export default {
    name:"todo2",
    components: {todoI},
    data: function(){
        return {
            todos: [
                {v:{
                    val: "Bread",
                    checked: false
                }},
                {v:{
                    val: "Fruits",
                    checked: false
                }},
                {v:{
                    val: "Ironing",
                    checked: false
                }}
            ],
            tempI: ''
        }
    },
    methods:{
        del (it){
            this.todos = this.todos.filter(i => i!==it)
        }
    }
}
</script>

todoI.vue：

<template>
    <li class="list-group-item d-flex align-items-center" @mouseover="btnShow=true" @mouseleave="btnShow=false">
        <input type="checkbox" class="me-4" v-model="value.checked">
        <div class="w-100" :class="value.checked ? checkedClass : '' ">{{ value.val }}</div>
        <div class="flex-shrink-1">
            <button class="btn btn-sm btn-close" v-show="btnShow" @click="del()"></button> 
        </div>
    </li>
</template>

<script>
export default {
    name:"todoI",
    props:{
        value: Object
    },
    data: function(){
        return {
            checkedClass:['text-decoration-line-through', 'text-muted'],
            btnShow: false,
        }
    },
    methods:{
        del(){
            console.log(this)
        }
    }
}
</script>

Answer 1

你可以简单地使用@keypress 或@keydown

<input type="text" class="form-control" id="inputAdd" v-model="tempI" @keypress.enter.prevent />

或

<input type="text" class="form-control" id="inputAdd" v-model="tempI" @keydown.enter.prevent = "">