Vuejs generating click event in next button after pressing enter input

Question

I'm encountering a very strange case.

I've build a very simple example in order to present my problem.

I've 3 files: App.vue, todo2.vue, todoI.vue. App.vue has 1 component (todo2.vue). todo2.vue has 1 component (todoI.vue).

You'll find under the code of todo2 and todoI.

The problem I'm facing is that when i press enter in the input text id #checkboxAdd , it triggers an event on the next button.

In the code below when pressing enter in the input text #checkboxAdd , it triggers the click event on the first iteration of my todoI button, which in my example calls the function del ( @click="del()" ), which console.log(this) , logging the first iteration of the component todoI.

What is even stranger is that when I add a button just after the input text, add a @click to console.log the event, it is indeed called (instead of calling the button of the first iteration of todoI).

Does anyone understand why this happens? Is this something I'm doing wrong?

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

you can simple use @keypress or @keydown

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

or

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