Vuejs2 Vuetify如何根据需要标记字段

当我们尝试在互联网上填写表单时，必填字段用红色“*”标记，表示该字段是必须填写的字段

---

像这样，有没有一种方法可以在vuetify.js中将用户指示到必填字段？

您可以将规则属性传递到

v-text-field

例如

发件人：

所需的道具不再明确地在标签上添加星号。v1.0版删除了所有需要验证的功能

因此，显然没有任何东西会将其设置为所需，我们必须手动将其添加到标签中：

label="Name*"

---

或者您可以使用CSS：

.required label::after {
    content: "*";
}

---

尽管您必须手动添加

必需的
类（当然，类的名称是任意的）。
从性能角度看，我不知道这是否是最佳解决方案。但它是有效的

将下面的JavaScript文件导入应用程序引导（或类似的内容）

从“Vue”导入Vue；
米辛({
安装的（）{
常数e=这个。$el；
如果（$el中的“查询选择器”）{
常量i=此.el.querySelector（'输入[必需]）；
如果（i！==null）{
常数l=以前的兄弟姐妹；
if（l.querySelector（'.required.sign'）==null）{
const r=document.createElement（'span'）；
//l.classList.add（‘必需’）；
r、 添加（'required'，'sign'）；
r、 appendChild（document.createTextNode（'*'）；
l、 儿童（r）；
}
}
}
},
});

Nuxt.js:将上面的文件放入
plugins
文件夹。在
nuxt.config.js
文件的
plugins
数组中包含其路径

将下面的规则添加到全局CSS/主题中

.v-label>.required.sign{
颜色：深色；
字体大小：粗体；
左侧边缘：.25em；
}
这有点痛苦，但有一个名为slot的“标签”，您可以这样做：

<v-text-field
  v-model="title"
  label="Title"
  counter
  maxlength="20"
  required
></v-text-field>

<v-text-field
    v-model="loginInfo.email"
    autofocus
    name="email"
    type="email">
  <template #label>
    <span class="red--text"><strong>* </strong></span>Email
  </template>
</v-text-field>


*电子邮件
我有了解决方案，可以将这个css类添加到主css文件或main.js中

div[aria-required=true].v-input .v-label::after {
  content: " *";
  color: red;
}

就是这样，在此添加字段中，需要：

<v-text-field required>


否我的意思是在文本字段中显示红色*标记。您的代码笔似乎未保存。但是将所需的属性传递给文本字段给了我*标记。=）<代码>必需
用于在
v.1.1.0
之前将其标记为必需的道具<据我所知，代码>规则

prop从未标记过它。有关此问题的更新，请参阅我的答案。我需要将css添加到App.Vueth。此解决方案是100%Vue/Vuetify，不依赖样式或css，可能会出现问题或过度使用。如果你这样设置的话，它将一直存在。在我的例子中，我使用“提示”和“规则”来实现v-text-field和v-textarea的这一点。

<v-text-field required>