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 {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …}

Notice, the comboActive method in the combo box does not send any params but in the method comboActive(event) I can get the target event.

I would like to be able to get the target event inside the updateTags method. As you can see I have tried using $event but this does not work

HTML:

<v-combobox multiple
  v-model="select[i]"
  append-icon
  small-chips
  deletable-chips
  @keyup="comboActive"
  @paste="updateTags(item,i)"
  @change="updateTags(item,i,$event)">
</v-combobox>

SCRIPT:

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)
    })
  })
},

When I add $event the @change="updateTags(item,i,$event)" I get back the array of items. I need to combo box itself so I can remove a class that was added during the comboActive method.

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

回答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;
        });
    });
},

来源：https://stackoverflow.com/questions/57629835/pass-the-target-element-through-change-in-vuetify-combo-box