如何在 vue2-editor 中使用 Vee-Validate答案

【问题标题】：How to use Vee-Validate with vue2-editor如何在 vue2-editor 中使用 Vee-Validate
【发布时间】：2021-07-13 01:31:23
【问题描述】：

我目前在我的项目中使用 vee-validate 和它的验证观察器。

例如，我让 vee-validate 使用像 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>

有没有人知道我可以如何做类似的事情，但我想使用 vue2-editor 而不是输入字段，如下所示

  <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>

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

我的解决方案基于仅在验证时显示错误。

        <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>

【讨论】：