Behold, a demonstration of code.
Vue.component('button-counter', {
template: '<button v-on:click="emit_event">button</button>',
methods: {
emit_event: function () {
this.$emit('change', 'v1', 'v2', 'v3') // Behold the emission of multiple values
}
},
})
new Vue({
el: '#parent',
data: {
args: ""
},
methods: {
change: function (...args) {
this.args = args
console.log(args)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.common.js"></script>
<div id="parent">
{{ args }} <br />
<button-counter v-on:change="change(1234, $event)"></button-counter>
</div>
The goal is to receive not only the parameter passed by the change() method from the parent component (in this case, 1234), but also all values emitted by the child component.
An attempt was made using $event to capture the emitted values from the child, however, it only captures the first value emitted by the child (in this example, 'v1')
Is there a solution for this? While emitting an array works for catching multiple values, some libraries emit values individually.
Here's the codepen link for the example showcased above: https://codepen.io/anon/pen/MmLEqX?editors=1011