Question

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

   <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/

Vuetify组件v-text-field没有得到类

2 个答案: