在Nuxt3中使用post提交数据，会自动提交两次？

Question

在nuxt3开发中，当用户在输入框输入数据并点击Subscribe按钮后，为什么会执行两次post提交，代码如下：

<script setup lang="ts">
import { ref } from 'vue'
const email = ref('') 
const submit = async () => {
  const { data } = await post('/subscribe', { 'email': email })
  console.log('submit') // 控制台只打印一次‘submit’
  email.value = ''// 如果删掉这行，就不会出现提交两次post的情况
}
</script>

<template>
<div>
    <el-input v-model="email" size="large" placeholder="Email Address" />
    <div class="button" @click="submit()">
      Subscribe
    </div>
</div>
</template>

在提交两次数据的时候，一次是用户输入的email值，一次是空的email值

尝试过post只在客户端提交，把组件ClientOnly都没用。

Answer 1

我做了以下修改：
1.使用 .value：在 post 请求中确保传递的是 email.value，而不是 email。
2.添加 .prevent：在 @click 事件中添加 .prevent 修饰符，防止默认行为。
具体修改如下：

<script setup lang="ts">
import { ref } from 'vue'
const email = ref('') 
const submit = async () => {
  const { data } = await post('/subscribe', { 'email': email.value }) // 确保传递的是 email.value
  console.log('submit') // 控制台只打印一次‘submit’
  email.value = '' // 重置 email
}
</script>

<template>
<div>
    <el-input v-model="email.value" size="large" placeholder="Email Address" />
    <div class="button" @click.prevent="submit">
      Subscribe
    </div>
</div>
</template>