Vue change color of input field when clicked delete button

Question

I am really new to vue js and I am trying to change the input field color when user click on the trash-fill button. Currently when I upload a character on input field it changes the color to green.

Is there a way to change input field color from green to white when the user click on <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

https://jsfiddle.net/ujjumaki/7qsnvftm/17/

AT82 AT82 · Accepted Answer · 2020-08-13T08:23:03

I see that you are using the ternary operator. You could introduce a new property in your objects in your array, which we would toggle true or false, for example whiteBackground, toggle it to true when button is clicked and back to false, when input changes (I assume this is what you want). Then you can nest this as a further ternary operator to your already existing one. So I suggest the following:

  list10: [
    {
      first_name: "mission1",
      id: "1",
      rfidState1: "",
      whiteBackground: false
    },
    //...
  ]

Methods:

posttorfidapi(event, col, index) {
    this.list10[index].whiteBackground = false;
    console.log("CHANGE INPUT FIELD COLOR TO GREEN");
  }
},
deleteRfidBeforeReload($event, index, col) {
  this.list10[index].whiteBackground = true;
  console.log("CHANGE THE PARTICULAR INPUT FIELD TO WHITE AGAIN");
}

And the ternary condition:

:style="listings.rfidState1 ? listings.whiteBackground ? '' : 
   { 'background-color': '#33FF90', color:'#33FF90' }  : ''"

CODESANDBOX

BTW, your fiddle does not work...

Vue change color of input field when clicked delete button

1 Answers