如何使 Vuetify 规则异步并等待 ajax 调用

问题描述

我正在使用 Vuetify 表单验证来检查输入字段，并且我试图弄清楚是否可以调用 ajax get 调用并使其等待以便我可以在规则中使用结果?

I am using Vuetify form validation to check an input field, and I'm trying to figure out if it's possible to call a ajax get call and make it await so that I can use the result in a rule?

我在下面尝试过，但似乎不起作用！

I've attempted it below, but it doesn't seem to work!

export default {
  data() {
    return {
      rules: {
        isLocationNew: value => {

          if (value == '' || value == null || value.length <= 1) {
            this.validLocation = false;
            return 'Invalid length.';
          }

          this.validLocation = true;

          var hasName = this.newLocationNameSearch(value);
          if (hasName) {
            return 'Location name already exists.';
          } else {
            return true;
          }
        }
      },


      // down in methods
      methods: {
        async newLocationNameSearch(text) {
          if (text == '' || text == null || text.length <= 1) {
            return false;
          }

          await axios.get('/api/Locations/HasLocationName', {
            params: {
              text: text,
              jobsiteId: this.jobsiteId
            }
          }).then(response => {
            return response.data;
          }).catch(function(error) {
            console.log(error)
          })

        }
      }

推荐答案

我找到了一个更好的解决方案，因为我需要执行类似于检查数据库中另一个电子邮件地址的检查.所以我使用了错误消息"

I found a better solution, as I needed to perform a check similar to checking another email address in the database. So I used 'error-messages'

喜欢这个

@input="newLocationNameSearch($event)" :error-messages="newLocationErrorMessages"

这样输入的每个字符都将在newLocationNameSearch()"中进行检查，然后我从newLocationErrorMessages"中填充和删除项目以显示给用户！

this way every character that is input will be checked in 'newLocationNameSearch()' and I fill and remove items from 'newLocationErrorMessages' to display to the user!

这篇关于如何使 Vuetify 规则异步并等待 ajax 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！