Search code examples
vue.jsnuxt.jsvee-validatevue-simple-suggest

Vee-validate + VueSimpleSuggest shows error on load page


enter image description here

I am using 2 modules Vee-validate + VueSimpleSuggest. If you use only Vee-validate, everything works as it should. But if use Vee-validate + VueSimpleSuggest, then the error is displayed immediately on loading page. I did not find any solutions in the documentation, maybe someone came across and can help.

<ValidationProvider
          name="enteredFrom"
          rules="required"
          v-slot="{ errors }"
        >
          <div
            class="form-group form-group--zindex"
            v-click-outside="onClickOutsideFrom"
          >
            <label for="enteredFrom" class="form-label"
              >Введіть станцію відправлення</label
            >
            <vue-simple-suggest
              type="text"
              name="enteredFrom"
              v-model.trim="group.enteredFrom"
              placeholder="Станція відправлення"
              :list="simpleSuggestionList"
              :filter-by-query="true"
              :styles="autoCompleteStyle"
              @focus="showStationFrom"
              @show-list="hideStationFrom"
              autocomplete="off"
            >
            </vue-simple-suggest>
            <span>{{ errors[0] }}</span>
          </div>
        </ValidationProvider>

Solution

  • Try to add a mode="passive" on ValidationProvider, see this example

    <ValidationProvider
      name="enteredFrom"
      rules="required"
      v-slot="{ errors }"
      mode="passive"
    >