解决Vue中，使用@keyup.enter 会触发两次事件的问题

问题:

在vue中，使用表单form，如下：

<div id="app2">
    <form action="" @submit.prevent>
       enter后，控制台输出(esc清空)：<br>
       <input type="text" v-model="value" @keyup.enter="enterHandle" @keyup.esc="value = ''">
       <!-- <button  @click="enterHandle">提交</button> -->
       <button type="submit" @click="enterHandle">提交</button>
    </form>
</div>
<script>
const vm2 = new Vue({
    el: "#app2",
    data: {
        value: ""
    },
    methods: {
        enterHandle(){
            console.log(this.value);
        }
    }
</script>

1.当输入内容，enter后，控制台打印了两次，也就是说调用了两次事件函数。

2. 输入内容后，不按enter，直接点击“提交”按钮，只会打印一次。

原因：

个人理解：
由于表单内button默认类型为submit,当input标签输入框有对应事件触发时，表单的提交事件就会同样触发。所以事件函数会触发两次。

解决：

<!-- 将表单的提交事件类型设置为button -->
<button type="button" @click="enterHandle">提交</button>

input输入框事件触发时，只会触发输入框对应事件。