如何使用 Vuetify 规则创建自定义验证以检查现有项目

Question

我目前正在使用 Vue 2 + Vuetify 制作我的第一个网络应用程序 (CRUD)，但我遇到了一个问题，我想添加到表单中的功能是验证以确保没有项目数据库中已有相同的标题。

这里是 code sample 使用假的 API。如果您愿意，下面是代码块（使用真实的 API）。

HTML部分：

<v-form ref="form" lazy-validation> 
  <v-text-field
    v-model="editedItem.title"
    :rules="[rules.required, checkDuplicate]"
    label="Title"
  ></v-text-field>
</v-form>

方法部分：

data() {
  return {
    editedItem: {
      title: '',
    },
    rules: {
      required: value => !!value || 'Required.',
    },
  }
},
methods: {
  checkDuplicate(val){
    let params = {};
    params["title"] = val;

    if (val){ //If null, don't call the API
      InventoryDataService.findExactTitle(params)
      .then((response) => {
        if(response.data != ""){ // Same title are found
          if (val == response.data.title) { // Can be discarded, but just to make it same as code sample
            return `Inventory titled ${val} already exists`;
          }
        }
        else{ // No same title found
          return true;
        }
      })
      .catch((e) => {
        console.log(e);
      });
    }
    else{ // Text field is empty
      return true;
    }
  },
}

实际API returns如果没有找到相同的标题，则没有数据，如果存在相同的标题，则只有 1 条记录。如果我将检查部分放在 axios.then 之外，它会起作用（在代码示例中，取消注释该部分，如果你想尝试运行它）；将其与“测试”进行比较并正确验证。但是当它只在 .then 块内时，它根本不起作用！（都使用“测试”和 response.data.title）

我试图将响应存储在 axios.then 之外的变量中以在外部进行比较，但是从我读过（也尝试过）的内容来看，这是不可能的，因为它是异步的（我仍然不真的不懂吗？）。我试过 async-await 和 Stack Overflow 中的各种东西，但是 none 已经解决了这个问题。

有什么办法可以解决这个问题吗？只要功能实现了，我不介意改变我的方法。

抱歉，如果代码一团糟，我按照教程进行了操作，然后就开始尝试了。如果您需要更多信息，请告诉我，感谢您的帮助！

Answer 1

抱歉，我没有资格评论所以回答，基本上你是想在 vuetify 不直接支持的 vuetify 文本字段中实现异步规则，你可以在这里查看一些解决方法。 How to make a Vuetify rule async and await with a ajax call

这是 github 中的未决问题：https://github.com/vuetifyjs/vuetify/issues/4231

更多解决方法参考：如果它能解决您的问题，请告诉我。

如何使用 Vuetify 规则创建自定义验证以检查现有项目

How to create custom validation using Vuetify rules to check existing item

javascript

validation

asynchronous

vue.js

vuetify.js