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

question from:https://stackoverflow.com/questions/65844426/vuejs-generating-click-event-in-next-button-after-pressing-enter-input

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