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

Posted 2023-02-23

【中文标题】VueJs：按钮单击仅在单击两次时有效

【英文标题】：VueJs : Button click is only worked when click twice

【发布时间】：2021-09-26 00:05:57

【问题描述】：

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

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

【问题讨论】：

使用form而不是div，enter是默认浏览器事件

我无法在 macOS Big Sur 上使用 Chrome 91 重现此 codepen 中的问题。你的环境是什么？

tony，我可以在您提供的 codepen 链接中看到同样的问题。请在文本框中输入内容并点击按钮

我看不到您所说的行为。我在文本框中输入内容，然后单击按钮。每次我尝试时单击一下都会显示警报。

【参考方案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 对残疾人更友好

【讨论】：

谢谢，但我也尝试从输入中删除@keyup.enter，但我的第一次点击仍然无法正常工作。是否必须使用表单进行单击？

tbh 我在sandbox 中尝试了他的示例，它工作得非常好，所以我不明白为什么表单标签也会产生任何影响。

@Camit1dk 是的，无论是从可访问性还是SEO考虑，form在这种情况下都比div好很多

Braks，我在您提供的沙箱链接中尝试了相同的代码，但它们也无法正常工作。在文本框中添加任何文本后，需要在按钮上单击两次。你能验证一下吗？