VueJS VeeValidate отображает диапазон, даже если есть "тонкий" - PullRequest
Новая
       59

VueJS VeeValidate отображает диапазон, даже если есть "тонкий"

1 голос
/ 03 августа 2020

Я использую VeeValidate для проверки моей формы.

Это мой код: 

 <ValidationProvider :rules="rules" :name="name" v-slot="{ errors }" slim>
        <input
            :id="id"
            type="checkbox"
            :class="className"
            v-model="currentValue"
        >
        <div class="text-danger">{{ errors[0] }}</div>
 </ValidationProvider>

Согласно их документации здесь , мы можем реализовать механизм без рендеринга, поместив атрибут slim. Это означает, что он не будет генерировать <span> или <div>, которые охватывают весь ввод и элемент ошибки.

Когда я пробовал это, он все еще обертывал весь ввод и элемент ошибки.

Он выводит так: 

<span>
  <input id="toc" type="checkbox" class="custom-control-input">
  <div class="text-danger"></div>
</span>

Я ожидаю, что он должен просто выводить вот так, согласно их документации: 

<input id="toc" type="checkbox" class="custom-control-input">

Я также заметил, что если я удалил это, он будет работать как ожидается: 

<div class="text-danger">{{ errors[0] }}</div>

Почему это происходит?

1 Ответ

2 голосов
/ 03 августа 2020

документы объясняют это:

Обратите внимание, что slim вступит в силу только тогда, когда у вас есть один дочерний элемент в слоте, так как у вас не может быть несколько узлов root в компоненте без рендеринга. В противном случае тег все равно будет отображаться.

...