Je voudrais appliquer conditionnellement une classe de couleur de texte dans un champ de texte. La classe que je veux est red - text , comme ceci:
<v-text-field
v-model="myModel" label="My Text"
:class="{ red: myModel.someBool }"
></v-text-field>
... mais cela entraîne une erreur d'analyse. Le problème est lié au nom de la classe, je pense, car cela fonctionne:
:class="{ red--text: myModel.someBool }"
... mais je veux colorer le texte, pas tout le champ. P >
Mettre le nom de classe souhaité entre guillemets 'red - text' empêche l'erreur d'analyse, mais n'a aucun effet sur la couleur.
Existe-t-il un moyen d'obtenir ce que je veux?
5 Réponses :
Créez un style de portée personnalisé qui s'applique à l'entrée (puisque la classe de v-text-field est appliquée à un div contenant).
<v-text-field
v-model="myModel" label="My Text"
:class="{ 'my-text-style': myModel.someBool }"
></v-text-field>
Ce nom de style peut contenir des tirets, à condition qu'il soit entre guillemets dans l'expression de classe. Liez la classe avec v-bind ...
<style scoped>
.my-text-style >>> .v-text-field__slot input {
color: red
}
</style>
Merci, mais je ne comprends pas. Je ne sais pas ce qu'est >>> ou ce que fait __slot ou pourquoi color: red fonctionnerait (puisque c'est ce que j'essaye) ou comment appliquer le nom de la classe avec des tirets (c'est aussi ce que j'essaye). Pouvez-vous expliquer un peu?
Lorsqu'une balise
Avez-vous essayé
: class = "{'red - text': myModel.someBool}"?@JacksonMiller - oui. Voyez ce que j'ai fait dans la question. Le correctif comprenait la citation de la classe, ainsi que quelques autres choses.