How to use Vee-Validate with vue2-editor

Question

I am currently using vee-validate in my project with it's validation observer.

For example, I got vee-validate working with an input like blow:

  <ValidationProvider
    :name="fieldName"
    :rules="rules"
    v-slot="{ errors }"
    :customMessages="error"
    :vid="name"
  >
   <input
      class="form-control"
      :class="{ 'is-invalid': errors.length }"
      :name="name"
      :inputmode="type"
      :id="id"
      :placeholder="placeholder"
      tabindex="1"
      v-model="input"
      @blur="onBlur"
      @focus="onFocus"
      @input="$emit('input', $event.target.value)"
    />
    <p class="veeValidatorError">{{ errors[0] }}</p>
  </ValidationProvider>
</template>

Does anyone have an idea how I can do something similar but instead of the input field I would like to use vue2-editor like below

  <ValidationProvider :name="fieldName" :rules="rules" v-slot="{ errors }" :customMessages="error" :vid="name">
    <vue-editor  v-model="content" :editorToolbar="customToolbar"></vue-editor>
    <p class="veeValidatorError">{{ errors[0] }}</p>
  </ValidationProvider>
</template>

NMathar · Accepted Answer · 2021-09-01 06:55:26Z

1

my solution is based on only show error on validation.

        <validation-provider
          v-slot="{ errors }"
          name="Text"
          rules="required"
        >
            <vue-editor
              v-model="content"
              :editorToolbar="customToolbar"
            />
            <p v-if="errors[0] && errors[0].length > 0">
              {{ errors[0] }}
            </p>
        </validation-provider>

answered Sep 1, 2021 at 6:55

NMathar

1991 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Vee-Validate with vue2-editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related