VueJs：按钮单击仅在单击两次时有效

Question

我写了一些代码如下。使用此代码，按钮单击仅在我第二次单击时才起作用。只有当我在文本框中写一些东西并单击按钮时才会出现问题。在文本框中写入内容并单击任意位置后，单击按钮后单击一次即可，否则需要单击两次才能调用该方法。

<template>
    <div>
        <input v-model="newuser" @keyup.enter="addarray"/>
        <button @click="addarray">Add New</button>
    </div>
</template>

<script>
export default {
    name:'computed',
    data(){
        return{
            newuser:''
        }
    },
    methods: {
        addarray(){
            alert('click');
        }
    },
}
</script>

Answer 1

因为您在表单中使用div 而不是form，所以@keyup.enter 事件将阻止第一次点击事件。

使用form作为您的表单，当客户端在键盘上点击输入时提交表单是form的默认事件。

new Vue({
    el:'#app',
    data(){
        return{
            newuser:''
        }
    },
    methods: {
        addarray(){
            alert('click');
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
    <form @submit.prevent="addarray">
        <input v-model="newuser"/>
        <button type="submit">Add New</button>
    </form>
</main>

更重要的是，form 对残疾人更友好