如何设置Vue公式输入错误的样式

Question

我用Vue.js编写了一个网站，为了处理用户界面，我想使用Vue Formula。总的来说，它是有效的，但我很难对输入错误进行样式化。所以，我试着做一个非常简单的例子来改变错误列表中的背景颜色，但它不起作用。

这是我的简单组件：

<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>

在加载了网站并且错误列表元素在那里之后，我可以在Google Chrome开发工具中更改背景颜色。但不是贝弗。

我希望有人能解释我必须做些什么才能让它发挥作用。

Answer 1

您的样式块具有作用域，这意味着您不能对不在直接<template>中的元素进行样式设置(这就是作用域的意义(。你有三个选择：

1. 删除<style>块的scoped部分。我真的不推荐这个
2. 将常规表单样式移动到全局css文件中。如果您使用1个以上的输入，我建议您这样做
3. 使用像::v-deep这样的深度选择器。这对于逐个案例的覆盖非常好，并且允许您选择比当前"覆盖"更深的元素；"范围"；。以下是一个示例：

<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>