使用Vue 3.2.33和VeeValidate 4.5.11编写的教程
这是一个快速的例子，说明如何在Vue 3和VeeValidate中，当一个表单被提交并向API发送HTTP（AJAX）请求时显示一个加载旋钮。一个加载旋钮向用户表明，表单已经提交，浏览器正在等待API的响应。
在表单提交时禁用提交按钮
下面的例子也是在AJAX请求过程中禁用表单提交按钮，以防止用户错误地重复提交表单。
VeeValidate是一个用于在Vue.js中构建、验证和处理表单的库。VeeValidate 4最近发布，与Vue 3兼容，官方文档可在vee-validate.logaretm.com/v4。
Vue 3加载旋钮示例
这个例子中的Vue应用包含一个带有单个按钮的表单，它向一个假的API端点提交HTTP POST请求。这个假的端点等待两秒钟才返回一个响应，所以加载旋钮被显示出来，并且按钮在表单中被禁用。
下面是它的操作：（见StackBlitz网站stackblitz.com/edit/vue-3-…
Vue 3 + VeeValidate应用组件与加载旋钮
在应用程序组件的script 块中，onSubmit() 方法返回对API的fetch HTTP POST请求的结果。
应用程序组件template 包含一个带有单个提交按钮的表单。该表单是用VeeValidate构建的。
控件，并在表单被提交时调用onSubmit() 方法。isSubmitting 表单状态道具是通过范围内的槽v-slot="{ isSubmitting }" ，提供给表单模板的。
不要忘记从onSubmit()返回一个Promise !
当VeeValidateisSubmitting 道具被true ，加载旋钮就会显示。为了使其发挥作用，必须从onSubmit() 函数中返回一个承诺（或异步函数）。VeeValidate将isSubmitting 设置为true ，而承诺/异步函数是待定的（既没有解决也没有拒绝）。
如果你忘记返回一个承诺（我有几次），加载旋钮将完全不显示。你可以通过删除演示中onSubmit() 函数中的return 来测试。
Vue 3 + VeeValidate - Show Loading Spinner on Form Submit
Submit
订阅或关注我的更新
订阅我的YouTube频道或在Twitter、Facebook或GitHub上关注我，以便在我发布新内容时得到通知。
除了编码之外...
我目前正试图和我的妻子Tina骑着一对皇家恩菲尔德喜马拉雅摩托车环游澳大利亚。你可以在YouTube、Instagram和Facebook上关注我们的冒险。
需要Vue 3的帮助？
搜索fiverr，快速找到经验丰富的Vue 3开发者的帮助。
