Issue
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/
Solution
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;
}
}
Answered By - birdspider
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.