Vue on button click change background color

0
votes

I am really new to Vue JS. Is there a way to change the input field background-color, once the value is updated as empty or ' '? Right now the code below consists of pre-defined value for teamfetch which 123456 and when the input field consists of value it displays the background-color as GREEN which is correct. But when I clicked on the @click:teamfetch event , it updates the value of teamfetch to empty or ' ' but the background-color of that input field does not change to WHITE or GRAY.

How can I change the background-color of the input-field to white when its empty?

View

<b-form-input v-model="teamfetch" v-on:input="postdata($event,
 index)" :style="teamfetch ? { 'background-color': '#33FF90', color:'#33FF90' } : null"></b-form-input>

<b-icon icon="trash-fill" font-scale="1.5" @click="teamfetch='' " ></b-icon>

Script

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'
Vue.use(BootstrapVueIcons)

data() {
  return {
   teamfetch: '123456'
  }
}
2
javascriptvue.js
On your delete button you set the value of teamfetch to an empty String, which is still a valid value. In the style binding you should check id the String is null or empty, then it should work – Josef

2 Answers

0
votes

You could conditionally bind the styles which is what I think you are trying to do right now but something like this

<b-form-input v-model="teamfetch" v-on:input="postdata($event, index)" :stlye="teamfetch ? {'background-color': '#33FF90', color:'#33FF90'} : {'background-color': white}></b-form-input>

0
votes

I would pull your functionality out into a method to clean things up, and then dynamically bind CSS to your div.

Set your click to change the colour

<b-icon icon="trash-fill" font-scale="1.5" @click="setColour()" ></b-icon>

Then in your data you will have a dataColour option

now you will set the correct color in your setColour() function;

setColour(textColour) {
     this.dataColour = textColour
    },

From there you can call the getColour() function from your b-form-input element.

<b-form-input v-model="teamfetch" v-on:input="postdata($event,
 index)" :style="[getColour()]">
</b-form-input>

Now down in your methods you can declare this method which will return the correct colour that you just set above

getColour(textColour) {
      return {
        color: this.dataColour,
      };
    },