【问题标题】: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
    
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-03-27
      • 2020-11-24
      • 1970-01-01
      • 1970-01-01
      • 2020-11-01
      • 2014-06-16
      • 2014-08-20
      • 2020-02-25
      相关资源
      最近更新 更多