使用 VeeValidate 处理没有提交按钮的 HTML 表单

Question

我在 <script setup> 中创建了一个 form handler using its composable:

const { submitForm, resetForm, handleSubmit, meta } = useForm()

function save() {
  // Here I want to submit the form

  submitForm() // This doesn't work
  showSaveSnackbar.value = false
}

function discard() {
  resetForm()
  showSaveSnackbar.value = false
}

const onSubmit = handleSubmit(values => {
  // pretty print the values object
  alert(JSON.stringify(values, null, 2));
});

在我的模板中我这样写：

<form @submit="onSubmit">
    <!-- inputs -->

</form>

我制作了一个带有显示按钮的小吃店（使用 useForm's meta.dirty 属性）。当我编辑表单并想要提交它时，我想使用这个自定义按钮而不是 HTML 表单的提交按钮（在这种情况下按钮调用自定义 save() 函数）。

我尝试使用 submitForm() 函数但没有成功。

我该怎么做？

Answer 1

我认为您可以在 save 函数中处理表单处理（并可能删除 onSubmit 函数）。

const { errors, values } = useForm();

const save = () => {
  showSaveSnackbar.value = false
  alert(JSON.stringify(values.value, null, 2));
};

使用 VeeValidate 处理没有提交按钮的 HTML 表单

Process an HTML Form without the Submit Button Using VeeValidate

javascript

vue.js

vee-validate

vuejs3

vue-composition-api