在 Vuetify 中的必填文本字段中添加星号

【问题标题】：Adding an Asterisk to required text fields in Vuetify在 Vuetify 中的必填文本字段中添加星号
【发布时间】：2020-12-31 06:29:29
【问题描述】：

我想在每个具有所需插槽的 v-text-field 上添加一个红色星号。通过向每个必需的文本字段添加一个类是可行的，但我不想通过这种方法来做到这一点。

这是我的代码：

<v-col cols="12" sm="6" md="6" >
 <v-text-field
 label="نام انگلیسی"
 v-model="role.name"
 :rules="normalRules"
 outlined
 dir="ltr"
 dense
 required
 ></v-text-field>
</v-col>

这是 DOM：

<div class="v-input__control">
 <div class="v-input__slot">
 <div class="v-text-field__slot">
 <label for="input-102" class="v-label theme--light">
 Last name
 </label>
 <input dir="ltr" required="required" id="input-102" type="text"></div>
 </div>
 <div class="v-text-field__details">
 <div class="v-messages theme--light">
 <div class="v-messages__wrapper"></div>
 </div>
 </div>
</div>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

我假设您将此文本字段输入到一个单独的组件中，以便在许多地方使用。您可以在包含星号的跨度标签上使用v-if。像这样：

<v-col cols="12" sm="6" md="6" >
  <v-text-field
    v-model="role.name"
    :rules="normalRules"
    outlined
    dir="ltr"
    dense
    :required="isRequired"
    >
      <template v-slot:label>
        نام انگلیسی<span v-if="isRequired" class="red--text"> *</span>
      </template>
  </v-text-field>
</v-col>

然后你可以将true 或false 传递给isRequired 作为父组件的prop。像这样：

<your-text-field-input-component :isRequired="true" />

或

<your-text-field-input-component :isRequired="false" />

不要忘记在您的文本字段组件中指定 isRequired 属性：

<script>
export default {
  ...
  props: {
    isRequired: {
      type: Boolean
    }
  },
  ...
}
</script>

【讨论】：