javascript - Pass the target element through @change in Vuetify combo box - Stack Overflow

admin管理员组

文章数量:1394123

I need to pass the target event through the updateTags method. Here is the bo box below:

When I call the boActive method I can get the target event.

KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …}

Notice, the boActive method in the bo box does not send any params but in the method boActive(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-bobox multiple
  v-model="select[i]"
  append-icon
  small-chips
  deletable-chips
  @keyup="boActive"
  @paste="updateTags(item,i)"
  @change="updateTags(item,i,$event)">
</v-bobox>

SCRIPT:

boActive(event) {
  console.log('active ', event)
  event.target.parentElement.classList.add('saving')
},
updateTags(item, i, e) {
  this.$nextTick(() => {
    this.$nextTick(() => {
      console.log('plete ', item, e)
    })
  })
},

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

I need to pass the target event through the updateTags method. Here is the bo box below:

When I call the boActive method I can get the target event.

KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …}

Notice, the boActive method in the bo box does not send any params but in the method boActive(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-bobox multiple
  v-model="select[i]"
  append-icon
  small-chips
  deletable-chips
  @keyup="boActive"
  @paste="updateTags(item,i)"
  @change="updateTags(item,i,$event)">
</v-bobox>

SCRIPT:

boActive(event) {
  console.log('active ', event)
  event.target.parentElement.classList.add('saving')
},
updateTags(item, i, e) {
  this.$nextTick(() => {
    this.$nextTick(() => {
      console.log('plete ', item, e)
    })
  })
},

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

• javascript
• vue.js
• vuejs2
• vuetify.js

Share Improve this question Follow edited Aug 23, 2019 at 18:55 Andrew Vasylchuk 4,77922 gold badges1313 silver badges3131 bronze badges asked Aug 23, 2019 at 16:14 JasonJason 1,16155 gold badges2020 silver badges4444 bronze badges 9

• You need to create a new bobox with the results? Sorry, i don't understand the question – ManuRGDev Commented Aug 23, 2019 at 16:18
• @ManuelRodriguezGil I am updating the question with more info :) – Jason Commented Aug 23, 2019 at 16:22
• Ok man, now i understand, you only need to use e.target – ManuRGDev Commented Aug 23, 2019 at 16:26
• i have tried the same issue here and it output only the selected items, if you want to play with CSS try class binding instead of accessing elements in that way – Boussadjra Brahim Commented Aug 23, 2019 at 16:39
• @BoussadjraBrahim I would love to do this with class binding but I couldn't figure it out. My goal is when the user is typing a word the bo box's border turns red. After the new items have been saved the red border disappears. – Jason Commented Aug 23, 2019 at 16:42

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

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

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

script

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

full example

Use e.target to get input changed.

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

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

This only works on simple ponents. Mi mistake.

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

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

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

本文标签： javascriptPass the target element through change in Vuetify combo boxStack Overflow