如何知道 vuetify 的 v-text-field 中的规则是否失败？

Question

我怎么知道 "rule" 是否在 vuetify 中失败了？我有一个文本字段

<v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>

我的规则定义：

data () {
  return {
    rules:{
      friendlyUrl(value){
        console.log('validating value');
        if (/^[a-z0-9\-]*$/.test(value)){
          return true;
        }
        return 'only lowercase letters, numbers and dashes are allowed'
      }
    }
  }

我想 "watch" 知道我的规则是否失败。这样我就可以禁用提交按钮，直到所有规则都通过。

如果您知道如何为多个文本字段设置此功能，可加分。

Answer 1

如果你使用他们的v-form component，Vuetify 会为你做这件事。

<v-form v-model="valid">
  <v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>
</v-form>

其中，valid是一个布尔数据属性。您可以使用它来切换按钮、设置类等

如何知道 vuetify 的 v-text-field 中的规则是否失败？

How to know if rule is failing in vuetify's v-text-field?

vue.js

vuetify.js