G
G
Gagatyn2020-09-26 00:38:49
Vue.js
Gagatyn, 2020-09-26 00:38:49

How to asynchronously pass value to validator in vuelidate?

Hello!

To validate the field for the maximum count. characters I use the validator maxLenght. I pass a certain number into it, in this case I just took the value id. I write to the
state when it works . At the time of rendering, there is still no response and an error: Can you tell me how to fix the error and correctly pass the request values? Use ?infomounted()
this.info is undefined...

watch



UPD
Answer:

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

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
VegasChickiChicki, 2020-09-26
@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();
  }
})

Maybe so?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question