Pass The Target Element Through @change In Vuetify Combo Box

I need to pass the target event through the updateTags method. Here is the combo box below: When I call the comboActive method I can get the target event. KeyboardEvent {isTruste

Solution 1:

I recommend to use class binding to handle this issue, or work with color computed property and change it conditionally by adding a data property called saving and update it in @change handler like :

<v-combobox:color="color"...
         @change="saving=true"
        ></v-combobox>

script

data () {
      return {

        saving:false,
        select: ['Vuetify', 'Programming'],
        items: [
          'Programming',
          'Design',
          'Vue',
          'Vuetify',
        ],
      }
    },
  computed:{
    color(){
      return !this.saving? 'red':'grey'
    }
  },

full example

Solution 2:

Use e.target to get input changed.

comboActive(event) {
        console.log('active ', event)
        event.target.parentElement.classList.add('saving')
    },

updateTags(item, i, e) {
            this.$nextTick(() => {
                this.$nextTick(() => {
                    console.log('complete ', item, e);
                    console.log(e.target);
                    e.target.parentElement.classList.remove('saving');
                });
            });
        },

This only works on simple components. Mi mistake.

Another way you can try is setting an Array with same index and when you trigger comboActive(item, i) and updateTags(item, i) toggle this Array to true || false

comboActive(i, event) {
    console.log('active ', event)
    this.isActive[i] = true;
},

updateTags(item, i) {
    this.$nextTick(() => {
        this.$nextTick(() => {
            this.isActive[i] = false;
        });
    });
},