javascript - 即使有“苗条”，VueJS VeeValidate 也会呈现跨度

Question

我正在使用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>

根据他们的文档here，我们可以通过放置slim属性来实现无渲染机制。这意味着它不会生成包含整个输入和错误元素的a<span>或 a 。<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>

为什么会这样？

标签： javascriptvue.jsvee-validate

Answer 1

文档对此进行了解释：

请注意，slim只有在插槽中有一个子元素时才会生效，因为在无渲染组件中不能有多个根节点。否则无论如何都会渲染标签。