VUE js：防止函数在最初加载/安装时运行一次[已修复]

Question

我正在尝试创建一个将提交的数据发送到数据库的表单： 我是 vue 新手，仍在阅读文档，如果答案在文档中，请提醒我。以下是我的代码摘要

<template>
      <form>
        <input type="text" required>
        ...
      </form>
    <button @click="handleSubmit">Submit</button>
</template>


<script>
import uploadData from '../path';
import { ref } from 'vue';

export default {
    name: "Upload",
    setup() {
      ...
      const handleSubmit = () => {
        data = {
          "name": "",
          ...
        }
        uploadData(data)
      }
      )
      
      return { handleSubmit }
    }
}
</script>

当然，我希望表单在最初加载时不会提交任何内容 我在本地服务器中尝试了它，当我在浏览器中打开它时，控制台会记录

Data Uploaded

，这是用

uploadData

编写的一行。这意味着 uploadData、handleSubmit 和 setup() 在组件首次安装时运行一次（对吗？）。这意味着它每次在实际填写表单之前都会向我的数据库提交一个空表单。我怎样才能解决这个问题？谢谢你。

我已阅读观察程序文档并尝试更改逻辑，即如果单击按钮时观察程序看到的值发生变化，则观察程序将运行并提交表单。但安装后

uploadData

仍会运行一次。

Answer 1

您可以使用@submit.prevent =“handleSubmit”

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData.name" required />
    <!-- Add other form fields with v-model bindings here -->
    <button type="submit">Submit</button>
  </form>
</template>


<script>
import uploadData from '../path';
import { ref } from 'vue';

export default {
  name: "Upload",
  setup() {
    const formData = ref({
      name: '',
      // Initialize other form fields here
    });

    const handleSubmit = () => {
      if (formData.value.name) { // Ensure required fields are not empty
        uploadData(formData.value).then(() => {
          console.log("Data Uploaded");
        }).catch(err => {
          console.error("Error uploading data:", err);
        });
      } else {
        console.error("Form is not completely filled out.");
      }
    };

    return { formData, handleSubmit };
  }
}
</script>

如果仍然不起作用，请告诉我。

谢谢你

Answer 2

抱歉，问题现在已经解决了。它在 uploadData.js 中

我导出的不是函数，而是函数 eval。

export default uploadData()

我把它改成了

export default uploadData

问题已解决