Javascript VueJS-我如何拥有多个v形插槽？

我正在使用vee validate v3.0进行验证，安装过程很顺利，但现在我正在尝试设置元素的样式，但似乎无法使其正常工作。我遵循了关于样式设置的非常简短的文档并编辑了vee validate配置，但是我注意到v型槽现在改为类。这让我很困惑，因为v型槽已经用于错误，我可以使用多个吗？我希望输入字段使用input.valid和input.invalid

Vue寄存器组件中的表单

<ValidationProvider rules="required|min" v-slot="{ errors, classes }">
    <input
        v-model="form.username"
        type="text"
        id="username"
        class="fadeIn second"
        :class="classes"
        name="login"
        placeholder="username"
    />
    <span class="form-error">{{ errors[0] }}</span>
</ValidationProvider>

<style>
input.invalid {
    color: red;
}

input.valid {
    color: green;
}
</style>

您可以使用

v-slot=“{errors，classes}”

。它会起作用的

下面是一个工作示例

VeeValidate.configure({
课程：{
有效：“我的有效”，
无效：“我的无效”
}
});
组件（'ValidationProvider'，VeeValidate.ValidationProvider）；
组件（'ValidationObserver'，VeeValidate.ValidationObserver）；
新Vue({
el:“#应用程序”，
数据（）{
返回{
用户名：null
}
}
});
input.my-invalid{
背景色：#ff000030；
}
input.my-valid{
背景色：#00ff0030；
}

{{错误[0]}




提交
手动验证
原始的：{{原始的}
脏：{{dirty}}
有效：{{valid}}
无效：{{invalid}
错误：{{errors}}
您是否看到添加到DOM元素中的类？看起来您已经将它配置为使用
有效
和
无效
作为类名，但是您的CSS中有
有效
和
无效
。@skille它与文档完全一样。但是我修改了它，它仍然不起作用。在dom中：类说toucteddirty是无效的验证更改，如果您完全从文档中复制代码，它将不起作用。它演示了多种不同的场景。在示例之间的文本中对此进行了解释。如果您在DOM元素上看到
无效
（看起来是这样），那么这意味着您已经配置了自定义CSS类。您需要更新CSS选择器以匹配已配置的类。
import { configure } from "vee-validate";

configure({
    classes: {
        valid: "is-valid",
        invalid: "is-invalid"
    }
});