Vue event listener with internal and external parameter

Question

How can I add an internal and external parameter to an event listener at the same time?

<myComp @do="wrapDo($event, 5)"></myComp>

function wrapDo(objectFromComp, myIntegerParameter){
    // objectFromComp is okey :)
    // myIntegerParameter is undefined :(
}

In myComp.vue:

this.$emit('do', { text: "return object from component"} );

I tried this but get undefined:

@do="x => wrapDo(x, 5)"

Dan · Accepted Answer · 2020-12-04 22:48:14Z

2

It should work fine, just make sure you have that function in methods:

Vue.component('mycomp', {
  template: `
  <div>
    <button @click="$emit('do', { text: 'return object from component'})">Emit</button>
  </div>
  `
})

new Vue({
  el: "#app",
  methods: {
    wrapDo(objectFromComp, myIntegerParameter) {
      console.log(objectFromComp, myIntegerParameter);
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <mycomp @do="wrapDo($event, 5)"></mycomp>
</div>

answered Dec 4, 2020 at 22:48

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

padavan Over a year ago

thx @dan dont know that happing but all work after restart VSCode

Collectives™ on Stack Overflow

Vue event listener with internal and external parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related