I have recently started working with Vue.js and I am attempting to change the color of an input field when the user clicks on the trash-fill button. Currently, when I enter a character in the input field, it changes the color to green.
Is there a way to change the input field color from green to white when the user clicks on the
<b-icon icon="trash-fill" font-scale="1.5" @click="deleteRfidBeforeReload($event, index, 10)"></b-icon>View
<div id="app">
<div v-for="(listings, index) in list10" :key="index">
<b-row>
<b-col sm="6">
<b-form-input id="input-live" :value="listings.first_name" disabled></b-form-input>
</b-col>
<b-col sm="4">
<b-form-input v-model="listings.rfidState1" ref="todos" v-on:input="posttorfidapi($event, 10, index)"
:style="listings.rfidState1 ? { 'background-color': '#33FF90', color:'#33FF90' } : null"></b-form-input>
</b-col>
<b-col sm="2">
<b-icon icon="trash-fill" font-scale="1.5" @click="deleteRfidBeforeReload($event, index, 10)"></b-icon>
</b-col>
</b-row>
</div>
</div>
Script
new Vue({
el: "#app",
data: {
list10: [
{ first_name: "mission1", id: "1", rfidState1:""},
{ first_name: "mission2", id: "2", rfidState1:""},
{ first_name: "mission3", id: "3", rfidState1:""},
{ first_name: "mission4", id: "4", rfidState1:""}
]
},
methods: {
posttorfidapi(event, col, index){
if(event.length > 3){
console.log("CHANGE INPUT FIELD COLOR TO GREEN");
}
},
deleteRfidBeforeReload($event, index, col){
console.log(index);
console.log("CHANGE THE PARTICULAR INPUT FIELD TO WHITE AGAIN");
}
}
})
My code on JSFIDDLE