Vue при нажатии кнопки изменить цвет фона

Question

Я новичок в Vue JS. Есть ли способ изменить цвет фона поля ввода после того, как значение будет обновлено как пустое или ''? Прямо сейчас приведенный ниже код состоит из предварительно определенного значения для teamfetch , которое составляет 123456, и когда поле ввода состоит из значения, оно отображает цвет фона как GREEN , что является правильным. Но когда я щелкнул событие @ click: teamfetch , оно обновляет значение teamfetch до пустого или '', но цвет фона этого поля ввода не меняется на БЕЛЫЙ или СЕРЫЙ .

Как изменить цвет фона поля ввода на белый, когда оно пусто?

Просмотр

<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>

Скрипт

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

data() {
  return {
   teamfetch: '123456'
  }
}

Answer 1

Я бы вытащил вашу функциональность в метод очистки, а затем динамически привязал CSS к вашему div.

Установите щелчок, чтобы изменить цвет

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

Тогда в ваших данных будет опция dataColour

, теперь вы установите правильный цвет в своей setColour() функции;

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

Оттуда вы можете вызвать getColour () из вашего элемента b-form-input.

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

Теперь в своих методах вы можете объявить этот метод, который вернет правильный цвет, который вы только что установили выше

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

Answer 2

Вы можете условно связать стили, что, я думаю, вы пытаетесь сделать прямо сейчас, но что-то вроде этого

<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>