Vue for input.length change background color

Question

Code consists of two input field , if the value of the Fullname is greater than 3, then its suppose to change the initial input field background into green. Is there a way to do that ?

View

<div id="app">
  <input type="text" v-model="fullname" placeholder="Enter Full Name" @input="changeInitialColor"/>
  <input type="text" v-model="initial" placeholder="On Full Name make it green"/>
</div>

Script

new Vue({
  el: "#app",
  data: {
    fullname:'',
    inital:''
  },
  methods: {
    changeInitialColor(){
     if(this.fullname.length > 3){
      console.log('Change v-model=Initial field color into green');
     }
     else{
      console.log("Dont change color");
     }
    }
  }
})

Below is the code on JSFIDDLE

https://jsfiddle.net/ujjumaki/kya27g9w/1/

tony19 · Accepted Answer · 2022-07-16 01:11:19Z

1

one way would be to use a computed property with css class bindings

<input type="text" v-model="fullname" placeholder="Enter Full Name"/>
<input type="text" v-model="initial" :class="{ green: fullnameIsMoreThan3Chars }"/>

// --
,methods: { ... }
,computed: {
    fullnameIsMoreThan3Chars(){
        return this.fullname.length > 3;
    }
}

edited Jul 16, 2022 at 1:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 17, 2020 at 15:11

birdspider

3,0941 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2020-06-17 15:13:03Z

1

You could use style or class binding like :

style="{'background-color':fullname.length>3?'green':''}":

 <input type="text" v-model="initial"
 style="{'background-color':fullname.length>3?'green':''}" 
placeholder="On Full Name make it green"/>

answered Jun 17, 2020 at 15:13

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 00:27:12Z

1

You can do a class binding to conditionally add a class to initial based on the length of the fullname input.

<input type="text" v-model="initial" placeholder="On Full Name makes it green" :class="{'green': fullname.length > 3}"/>

You can also create a computed property to know if the fullname input is greater than three and use that computed value instead (should keep your template cleaner)

<input type="text" v-model="initial" placeholder="On Full Name makes it green" :class="{'green': fullNameOk}"/>

{
  ...
  computed: {
    fullNameOk() {
      return this.fullname.length > 3
    }
  }
}

Here's a working fiddle

edited Jul 16, 2022 at 0:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 17, 2020 at 15:21

Jair Reina

2,93527 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vue for input.length change background color

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related