v-seelct not rendered inside a vee-validate ValidationProvider

74 Views Asked by At

I am getting the following error while trying to use a v-select

v-seelct not rendered inside a vee-validate ValidationProvider
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'model')
    at findModelConfig (vee-validate.esm.js:1071:1)
    at findValue (vee-validate.esm.js:1028:1)
    at findInputNodes (vee-validate.esm.js:1053:1)
    at vee-validate.esm.js:1058:1
    at Array.reduce (<anonymous>)
    at findInputNodes (vee-validate.esm.js:1057:1)
    at vee-validate.esm.js:1058:1
    at Array.reduce (<anonymous>)
    at findInputNodes (vee-validate.esm.js:1057:1)
    at Proxy.render (vee-validate.esm.js:1510:1)

<template>
  <ValidationProvider
    :name="label"
    tag="div"
    :rules="validationRules"
    class="form-input"
    v-slot="errors"
  >
    <div :class="labelClass" >
      <small :class="titleClass" v-text="label" />
      <v-select
        v-if="isEdit"
        v-model="selected"
        :options="options"
        :searchable="searchable"
        :label="optionLabel"
        class="form-input-field d-block"
        :disabled="isDisabled"
      />
      <div v-else class="inactive-form-value">{{ valueOrPlaceholder }}</div>

      <p class="form-input-error" v-show="errors.length" v-text="errors[0]"/>
    </div>
  </ValidationProvider>
</template>

in this way

          <input-select
            v-model="country"
            :options="countriesCaregiver"
            :label="$t('form.country')"
            :validationRules="required"
          />

Those are my dependencies

"vue": "^3.2.36", "vue-select": "^3.20.2" "vee-validate": "^3.4.15"

I tried to update to the latest veevalidate library but it does not contain anymore ValidationProvider, thus I am trying to reuse the Vue2 version.

Any suggestion?

Thanks!

0

There are 0 best solutions below