Как сделать правило Vuetify асинхронным и ожидать с помощью вызова ajax - PullRequest
Новая
       23

Как сделать правило Vuetify асинхронным и ожидать с помощью вызова ajax

0 голосов
/ 29 мая 2019

Я использую проверку формы Vuetify для проверки поля ввода и пытаюсь выяснить, можно ли вызвать ajax get call и сделать его ожидающим, чтобы я мог использовать результат в правиле?

Я попытался сделать это ниже, но, похоже, это не работает! 

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)
          })

        }
      }

Ответы [ 3 ]

0 голосов
/ 29 мая 2019 
methods: {
  fetchUserData: async function() {
      const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
      );
      this.users = await response.json();
}

Вы можете использовать его, как в этом примере.

0 голосов
/ 29 мая 2019

Я нашел лучшее решение, так как мне нужно было выполнить проверку, аналогичную проверке другого адреса электронной почты в базе данных.Поэтому я использовал 'error-messages'

вот так

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

таким образом каждый вводимый символ будет проверяться в 'newLocationNameSearch ()', и я заполняю и удаляю элементы из 'newLocationErrorMessages' для отображения пользователю!

0 голосов
/ 29 мая 2019

newLocationNameSearch Асинхронная функция.Асинхронные функции возвращают обещания, поэтому, когда вы пишете 

var hasName = this.newLocationNameSearch(value);

hasName установлен на обещание, которое всегда верно.

Вам нужно что-то вроде: 

    isLocationNew: async value => {

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

      this.validLocation = true;

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

И помните, что везде, где вызывается isLocationNew, его также нужно ожидать.

Кроме того, метод newLocationNameSearch фактически не возвращает значение при ожидании. 

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

Имеетоператор возврата внутри обратного вызова для вызова .then().newLocationNameSearch тогда ничего не возвращает, то есть возвращает undefined, что ложно.

Хорошая новость заключается в том, что async / await означает, что нам больше не нужно беспокоиться о then обратных вызовах.

Вместо этого мы можем написать 

try {
     var response = await axios.get('/api/Locations/HasLocationName', {
        params: {
          text: text,
          jobsiteId: this.jobsiteId
        }
      });

      return response.data;

} catch (error) {
    console.log(error)
}
...