uview-plus 表单提交 vue3

在Vue3中，可以使用`ref`和`watch`来实现表单提交。

首先，需要在`setup()`函数中定义一个`ref`变量来存储表单数据：

import {ref} from 'vue';

export default {
  setup() {
    const formData = ref({
      name: '',
      email: '',
      message: '',
    });

    return {
      formData,
    };
  },
};

然后，在表单中绑定`formData`中的属性，可以使用`v-model`指令：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" v-model="formData.name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" v-model="formData.email">
  
  <label for="message">Message:</label>
  <textarea id="message" v-model="formData.message"></textarea>

  <button type="submit">Submit</button>
</form>

最后，在`setup()`函数中使用`watch()`函数来监听表单数据的变化，并在提交时发送POST请求：

import {ref, watch} from 'vue';
import axios from 'axios';

export default {
  setup() {
    const formData = ref({
      name: '',
      email: '',
      message: '',
    });

    watch(formData, () => {
      console.log(formData.value);
    });

    const handleSubmit = () => {
      axios.post('/api/form', formData.value)
        .then(() => {
          console.log('Form submitted successfully.');
        })
        .catch(() => {
          console.log('Form submission failed.');
        });
    };

    return {
      formData,
      handleSubmit,
    };
  },
};

以上代码中，`watch()`函数会在表单数据发生变化时输出数据到控制台。`handleSubmit()`函数会在表单提交时发送POST请求到`/api/form`，并根据请求结果输出信息到控制台。最后，在模板中绑定表单提交事件：

<form @submit.prevent="handleSubmit">
  <!-- 表单内容 -->
</form>

这样就完成了表单提交的实现。