Javascript 按enter input后，Vuejs在“下一步”按钮中生成单击事件

我遇到了一个非常奇怪的情况

我建立了一个非常简单的例子来说明我的问题

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

您可以在todo2和todoI代码下找到

我面临的问题是，当我在输入文本id

#checkboxAdd

中按enter键时，它会在next按钮上触发一个事件

在下面的代码中，当在输入文本

#checkboxAdd

中按enter键时，它会在my todoI按钮的第一次迭代中触发click事件，在我的示例中，它调用函数del（

@click=“del（）”

），该函数

console.log（this）

，记录组件todoI的第一次迭代

更奇怪的是，当我在输入文本之后添加一个按钮时，在

控制台中添加一个
@click
。log

事件，它确实被调用（而不是调用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>

<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>

从“/todoI.vue”导入todoI
导出默认值{
名称：“todo2”，
组件：{todoI}，
数据：函数（）{
返回{
待办事项：[
{v:{
瓦尔：“面包”，
勾选：假
}},
{v:{
瓦尔：“水果”，
勾选：假
}},
{v:{
瓦尔：“熨烫”，
勾选：假
}}
],
tempI:'
}
},
方法：{
德尔（it）{
this.todos=this.todos.filter（i=>i！==it）
}
}
}

todoI.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>

<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>

{{value.val}}

导出默认值{
名称：“todoI”，
道具：{
值：对象
},
数据：函数（）{
返回{
checkedClass:['text-decoration-line-through'，'text-muted']，
错，
}
},
方法：{
del（）{
console.log（这个）
}
}
}

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

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

或

事实上，通过向下键或按键切换向上键可以防止这种行为。表示按下时会触发单击。但你知道为什么会发生这种情况吗？原因是在填写表单时，在文本框中按enter键应提交表单。这称为隐式表单提交。尽管对于辅助技术和重要的用户便利至关重要，但许多web表单出于某种原因阻止了它。我怀疑问题是否来自正在提交的表单，因为表单已经包含了提及的

@submit.prevent=“”如果你的问题被解决了，请考虑接受和支持我的解决方案。谢谢：我的问题不是找到一种使这个代码有效的方法，我已经有了另一种方法，我的问题是理解这个过程，它可以解释为什么这样做是为了更好地理解Vuujs。提醒一下，这个问题是“有人明白为什么会发生这种情况吗？”，从你的回答中我知道你不明白，这就是为什么我现在不接受你的答案（但我没有投票）。一旦给出解释，我会很乐意接受答案（如果你的答案被编辑过的话）。