验证组件v-text-field未获取类

Question

我试图在vuetify的v-text-field中添加class，但是当它渲染到dom时，我意识到输入中没有class。

   <v-text-field label="Login" class="upper" name="login" prepend-icon="person" type="text" v-model="usuario"></v-text-field>

我得到了这个：

<div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
<div class="v-input__prepend-outer">
<div class="v-input__icon v-input__icon--prepend">
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light">person</i>
</div>
</div>
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-10" class="v-label v-label--active theme--light" style="left: 0px; right: auto; position: absolute;">Login</label><input name="login" id="input-10" 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></div>

我想要输入字段中的上层类。

Answer 1

CSS代码应用于<div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">，但需要应用于<input name="login" id="input-10" type="text">

将CSS代码更改为：

.upper input { 
text-transform: uppercase;
 }

Answer 2

您的代码对我有效，但它只适用于占位符。如果要将其应用于输入文本，则需要执行以下操作：

.upper input {
    text-transform: uppercase;
}

这里有一个可以工作的JsFiddle：https://jsfiddle.net/SilliconMachine/mrx041oL/3/