Issue
I have inputs with labels that rise when input has data, like materialize ( https://materializecss.com/text-inputs.html ). I use my checkInputData function to check if input has any value and set 'with-data' class. It works when user input some data to input but when i initialize the component and data returned from api it does`n works.
How can i set 'with-data' class to my input when data returned from api?
My HTML
<input type="text" :value="name" @input="setName($event.target.value); checkInputData($event);" />
<label class="input-label">name</label>
checkInputData function
checkInputData(event) {
let input = event.target;
let hasValueClass = 'with-data';
if(input.value != '') {
input.classList.add(hasValueClass);
} else {
input.classList.remove(hasValueClass);
}
},
Solution
Use v-model for 2 way bind and use it for altering class(it will ignore the :value
property).
<input type="text" v-model="nameValue" :class="{'with-data' : nameValue !== ''}" @input="setName($event.target.value);" />
<label class="input-label">name</label>
within data
add nameValue
property as well.
data(){
return {
/*other values*/
nameValue:''
}
}
Answered By - Pranav C Balan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.