Как асинхронно передать значение в валидатор в vuelidate?

Question

[Gagatyn]

Здравствуйте!

Для валидации поля на максимальное кол. символов использую валидатор maxLenght. В него передаю некую цифру, в данном случае взял просто значение id.
В состояние info записываю, когда срабатывает mounted().
На момент отрисовки еще нет ответа и ошибка: this.info is undefined...

Подскажите, как исправить ошибку и корректно передать значения запроса?
Использовать watch?



UPD
Ответ:

validations: {
    somethingName: {
      required,
      async maxLength(val) { // <- ответ
        const max = await this.getSettings.max;
        const length = val.length;
        if (val === "") {
          return val;
        }
        return length <= max;
      }
    }

Answer 1

[VegasChickiChicki]

Vue.use(window.vuelidate.default)
const { required, minLength, maxLength } = window.validators

new Vue({
  el: "#app",
  data: {
    input: '',
    info: 20
  },
  validations: {
  	input: {
    	required,
      maxLength: maxLength(this.info.id || 20)
    }
  },
  methods: {
    getInfo: async function() {
    	let res = await fetch("https://jsonplaceholder.typicode.com/todos/20");
      this.info = await res.json().id;
    },
    onSubmit() {
    	if (this.$v.$invalid) {
        this.$v.$touch();
        return;
      }
    }
  },
  async mounted() {
  	await this.getInfo();
  }
})

Может так?

Comments

[Gagatyn]

Упс, я исправил код, пробовал.
Нет, к сожалению не получается:

async mounted() {
  	await this.getInfo();
  }

[VegasChickiChicki]

Gagatyn, Учитесь работать с консолью. res.json() - возвращает промис, можно получить данные из него, например вот так:

res.json().then(data => {
   this.info = data;
});

[Gagatyn]

VegasChickiChicki, хорошо.
Наверно это поможет, а дальше как передать значение в валидатор?