Vue.js Vuetify如何禁用按钮，直到所有验证规则都为真？

我正在使用Vuetify创建一个简单的表单，其中数据通过与每个字段关联的一些规则进行验证。我试图做的是，如果任何验证规则失败，则禁用提交按钮。我怎样才能做到？我想了解的是如何检查每个规则的状态，以便绑定按钮上的

disabled

属性

<template>
  <v-card>
    <v-card-text>
      <v-combobox
        v-model="addTool.name"
        :rules="rules.name"
        :items="toolNames"
        counter
        label="Name of the tool"
      ></v-combobox>
      <v-combobox
        multiple
        :small-chips="true"
        :deletable-chips="true"
        :hide-selected="true"
        :clearable="true"
        v-model="addTool.categories"
        :rules="rules.categories"
        label="Select/Add categories"
        :items="this.toolCategories"
        :search-input.sync="searchCat"
        @change="searchCat = ''"
      ></v-combobox>
      <v-text-field
        v-model="addTool.site"
        label="URL for the tool. It is best to use a Github repo link."
        :rules="rules.site"
      ></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click="submit" color="grey darken-4" class="green--text text--accent-2" dark>Add</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      searchCat: "",
      addToolMessage: undefined,
      addTool: {
        name: "",
        categories: [],
        created_on: "",
        site: ""
      },
      rules: {
        name: [
          v => !!v || "Required.",
          v => v.length < 80 || "Name is too long",
          v =>
            !this.toolsData
              .map(n => n.name.toLowerCase())
              .includes(v.toLowerCase()) || "This tool already exists"
        ],
        categories: [v => v.length != 0 || "At least one category is needed"],
        site: [
          v => !!v || "Required.",
          v =>
            new RegExp(
              "^(?:(?:https?|ftp)://)(?:S+(?::S*)?@)?(?:(?!(?:10|127)(?:.d{1,3}){3})(?!(?:169.254|192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]|2d|3[0-1])(?:.d{1,3}){2})(?:[1-9]d?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[1-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:.(?:[a-z\u00a1-\uffff]{2,})).?)(?::d{2,5})?(?:[/?#]S*)?$",
              "ig"
            ).test(v) || "Not a valid URL",
          v =>
            !this.toolsData.map(u => u.site).includes(v) ||
            "This tool already exists"
        ]
      }
    };
  }
};
</script>

添加
导出默认值{
数据（）{
返回{
对话：错，
搜索猫：“，
addToolMessage:未定义，
添加工具：{
姓名：“，
类别：[]，
已在“”上创建了\u，
地点：“
},
规则：{
姓名：[
v=>！！v | |“必需”，
v=>v.length<80 | |“名称太长”，
v=>
！这是工具数据
.map（n=>n.name.toLowerCase（））
.includes（v.toLowerCase（））| |“此工具已存在”
],
类别：[v=>v.length！=0 | |“至少需要一个类别”]，
地点：[
v=>！！v | |“必需”，
v=>
新正则表达式(
（以下：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：（（（（：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：（？：[1-9]d | 1dd | 2[0-4]d | 25[0-5]）（？：[1-9]d | 2[0-4]d | 25[0-4]）（？：（？：[a-z\u00a1-\uffff0-9]-*）*[a-z\u00a1-\uffff0-9]+（？：（？：[a-z\u00a1-\uffff0-9]-*）*[a-z\u00a1-\uffff0-9]+（？：（？：[a-z\u00a1-\uffff]{2,5}）（？：：d{2,5}）（？：[/？#]S*）？$”，
“ig”
).test（v）| |“不是有效的URL”，
v=>
！this.toolsData.map（u=>u.site）.包括（v）||
“此工具已存在”
]
}
};
}
};

您可以创建一个计算属性来处理它。假设需要

name

和

site

，因此：

添加

---

从这里开始：

Vuetify将跟踪表单的有效性，如果您将输入元素包装在

v-form

中，然后将v-model附加到

表单

，如下所示：

添加

您还需要将

isFormValid

添加到组件的

数据

字段：

数据：（）=>({
isFormValid:false，
})

---

您可以在此处阅读更多内容：

谢谢，但不幸的是，您的解决方案没有回答我的问题。在您的解决方案中，只要这些属性中有数据，isAddButtonDisabled将返回true。不要检查它们是否经过验证。抱歉！编辑了我的回答啊，问题是如何将其映射到验证函数数组。有数据结构中的属性无效，如您所见。在本例中，您可以检查

this.errors.count（）>0

但如何将isFormValid映射到规则数组是您不必回答的问题。

isFormValid

的值由vuetify设置为true，当所有验证规则都返回true时。@ManishRaj这是可行的！但我在文档中找不到它，它在哪里？但默认情况下，在单击某个字段进行验证之前，Submit按钮处于启用状态。默认情况下，应禁用“提交”。

<script>
export default {
  data() {
    return {
      addTool: {
        name: "",
        categories: [],
        created_on: "",
        site: ""
      },
    };
  },
  computed: {
    isAddButtonDisabled() {
      return !(this.addTool.name || this.addTool.site);
      // means u have neither name nor site  
    },
  },
};
</script>

export default {
  computed: {
    formValid () {
      // loop over all contents of the fields object and check if they exist and valid.
      return Object.keys(this.addTool).every(field => {
        return this.addTool[field] && this.addTool[field].valid;
      });
    }
  }
}