web-dev-qa-db-fra.com

Comment changer la couleur du champ de texte vue / vuetify conditionnellement

Je voudrais appliquer conditionnellement une classe de couleur de texte dans un champ de texte. La classe que je veux est red--text, comme ça:

:class="{ red--text: myModel.someBool }"

... mais cela entraîne une erreur d'analyse. Le problème est lié au nom de la classe, je pense, car cela fonctionne:

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ red: myModel.someBool }"
></v-text-field>

... mais je veux colorer le texte, pas tout le champ.

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?

javascriptvue.jsvuetify.js
2
goodson

Créez un style de portée personnalisé qui s'applique lui-même à l'entrée (puisque la classe de v-text-field est appliquée à un div contenant).

<style scoped>
  .my-text-style >>> .v-text-field__slot input {
    color: red
  }
</style>

Ce nom de style peut contenir des tirets, tant qu'il est cité dans l'expression de classe. Liez la classe avec v-bind ...

<v-text-field
  v-model="myModel" label="My Text"
  :class="{ 'my-text-style': myModel.someBool }"
></v-text-field>
4
NaN

vous pouvez lier conditionnellement des classes comme celle-ci:

:class="myModel.someBool ? 'red--text' : ''"
1
Viktor Korsun

Vous pouvez utiliser v-bind avec condition ternaire pour appliquer le style

 <v-text-field
       v-bind:style="{'border': documentData[name] ? 'solid green 1px !important':'solid red 1px!important'}"
       v-model="documentData[name]"
       :label="name"
       :placeholder="value"
        regular/>

Remarque - Vous ne pouvez pas utiliser de couleur pour modifier le texte à l'aide de. & mettez en surbrillance la couleur de la boîte et si vous utilisez la couleur d'arrière-plan à la place de la bordure, vous pouvez changer la couleur du champ entier.

0
Pallav Chanana

Vous pourriez aussi bien définir la classe réelle à partir de data ()

data: function () {
        return {
            testClass: 'red--text'
        }
    }

Et liez votre classe de champs de texte à cette valeur :class="testClass"

Ensuite, dans les méthodes, modifiez toute la classe

methods: {    
        uploader() {
            this.testClass = 'primary--text'
        }
    }
0
pintoflager