CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
goodson
goodson

Reputation: 757

How to change vue/vuetify text field color conditionally

I'd like to conditionally apply a text color class in a text field. The class I want is red--text, like this:

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

...but that results in a parse error. The problem is related to the class name, I think, because this works:

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

...but I want to color the text, not the whole field.

Enclosing the desired class name in quotes 'red--text' prevents the parse error, but has no effect on the color.

Is there a way to get what I want?

Upvotes: 10

Views: 44518

Answers (5)

Andrew Nodermann
Andrew Nodermann

Reputation: 690

You can also do this using methods

<template>
  <div>
    <v-btn text :color="tabColor(1)" @click="selectTab(1)">Tab 1</v-btn>
    <v-btn text :color="tabColor(2)" @click="selectTab(2)">Tab 2</v-btn>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentTab: 1
    };
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab;
    },
    tabColor(tab) {
      return tab == this.currentTab ? "primary" : "normal";
    },
  },
};

</script>

Upvotes: 0

Pallav Chanana
Pallav Chanana

Reputation: 667

You can use v-bind with ternary condition to apply 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/>

Note - You cannot user color for changing text by using. & highlight box color as well as if you use background-color in place of border you can change whole field color.

Upvotes: 1

pintoflager
pintoflager

Reputation: 1

You might as well set the actual class from data()

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

And bind your text fields class to that value :class="testClass"

Then in methods alter the whole class

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

Upvotes: 0

Viktor Korsun
Viktor Korsun

Reputation: 31

you can conditionally bind classes like this:

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

Upvotes: 3

NaN
NaN

Reputation: 1985

Create a custom scoped style that applies itself to the input (since the class of v-text-field is applied to a containing div). 

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

This style name can contain hyphens, as long as it is quoted in the class expression. Bind the class with v-bind...

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

Upvotes: 10

Related Questions