为新表单提交添加错误检查：Vue+Vuetify

【问题标题】：Add Error Checking for New Form Submit: Vue+Vuetify为新表单提交添加错误检查：Vue+Vuetify
【发布时间】：2020-08-08 09:27:57
【问题描述】：

https://vuetifyjs.com/en/components/data-tables/#crud-actions

我正在使用这张桌子。如果表单为空，则没有错误检查。如何添加错误检查？

我试过这个：

<v-form @submit.prevent="save">

<v-text-field v-model="editedItem.customer_name" :rules="customerNameRules" required></v-text-field>


<v-btn color="blue darken-1" @click="save">Save</v-btn>
</v-form>

但它不起作用！只需关闭模态并在数组中添加空值！

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

如果您想使用 @submit.prevent ，那么您的 v-btn 需要 type="submit" 才能知道它是一个提交按钮。或者，如果您想使用 @click，您可以使用 this.$refs.form.validate() 以编程方式调用验证，例如：

<template>
     <v-form ref="form">

          <v-text-field v-model="editedItem.customer_name" :rules="customerNameRules" 
          required></v-text-field>


          <v-btn color="blue darken-1" @click="save">Save</v-btn>
     </v-form>
</template>

<script>

   save() {
      if(this.$refs.form.validate()) {
         //save my item...
      }

   }
</script

【讨论】：