Cannot read property '__isVuelidateAsyncVm' of undefined

Question

Here is the code I have codesandbox, What I have here is a form with validation and the "Calculate" button which is disabled until all fields will be valid. But for some reason, I'm getting the error Cannot read property '__isVuelidateAsyncVm' of undefined .

Renny

Answer 1

First some comments, it's great that you have provided a sandbox, but your question itself should contain the relevant code to reproduce the issue. This question becomes useless if (when) the link dies.

Doing some debugging to actually find which field is causing this error. By eliminating one field after one, I noticed that it is the gender field that is causing your issue. So looking closer at inArray, your custom validator, I noticed that you are not returning anything, which causes the validation to fail. Add return to your inArray:

const inArray = (value, vm) => {
  // add return!
  return vm.items.some(gender => value.indexOf(gender) !== -1);
};

PS, as a hint, try to do some debugging to narrow down the issue and you might have solved this yourself :)

Rest of relevant code for your issue:

<v-select
   v-model="user.gender.value"
   :items="user.gender.items"
   label="Gender"
   :solo="true"
   :error-messages="userGenderErrors"
   append-icon
></v-select>

Script:

validations: {
  user: {
    gender: {
      value: {
        required,
        inArray
      }
    },
  }
},

FIXED SANDBOX

Overexcite

Answer 2

I had the same problem, so thank you Bogdan for the question and AT82 for the answer, it really helped me :)

I want to add my situation, I had this code:

validations() {
  return {
    VaccineUpload: {
      vaccines: {
        $each: {
          isValidInput: (vaccine) => {
            const { brand, date } = vaccine
            return (!brand && !date) || (brand && date)
          }
        }
      }
    },

And the return statement return (!brand && !date) || (brand && date) would return null instead of a boolean, which was generating the same error. My solutions was to change the code to:

return !!((!brand && !date) || (brand && date))

So always ensure you are returning a boolean to have a successful usage of the validations.

Toback