CODEWITHSUNDEEP
vue.jsvuetify.js
isebarn
isebarn

Reputation: 3950

Vuetify - Outline color set programatically

Does anyone know how to programatically set the outline color on a v-text-field ?

I was thinking something along the lines of

<v-text-field v-model="value" :class="value === 0 ? greenStyle : regularStyle"/>

<style>
  .greenStyle {
    color: green
  },

  .redStyle {}
</style>

Upvotes: 0

Views: 315

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27222

You can use color attribute like this : :color="!value ? 'green' : 'red'"

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
     value: null
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
      <v-container>
            <v-text-field
              label="Outlined"
              outlined
              v-model="value"
              :color="value === '0' ? 'green' : 'red'"
            ></v-text-field>
      </v-container>
  </v-app>
</div>

Upvotes: 2

Related Questions