In Vue.js, how can I emit multiple value from child to parent while parent's v-on pass another parameter?

user2925565 :

This is a code example.

Vue.component('button-counter', {
  template: '<button v-on:click="emit_event">button</button>',
  methods: {
    emit_event: function () {
      this.$emit('change', 'v1', 'v2', 'v3')  // Here I emit multiple value
    }
  },
})
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>

From the parent component, I want to get parameter pass by change() (in this example, 1234), but also every value emitted by child component. I try to use $event to catch the values child emit, however $event is only set up to the first value child emit (int this example, 'v1')

Is there any way to do that? I know I can emit an array to catch multiple value. But some library just emit multiple value.

This is the codepen for above example. https://codepen.io/anon/pen/MmLEqX?editors=1011

Bert :

Define a handler that accepts the multiple parameters from the event and passes them along to the change method in addition to your static parameter.

<button-counter v-on:change="(...args)=>this.change(1234,...args)"></button-counter>

Alternatively

<button-counter v-on:change="(...args)=>this.change([1234,...args])"></button-counter>

And change your method to

change: function (args) {
  this.args = args
  console.log(args)
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Vue.js, emit multiple parameters from child to parent

How can i pass useState value from child to parent

How can i pass data from parent component to a child component in Vue.js?

How can I get a child component's watcher's updated value from parent component in Vue 2?

How to pass href parameter from parent vue component to child component?

How could i pass a value from a child component to parent, when i have multiple child components?

emit value from mounted in child.vue to parent.vue

how to emit data from child to parent's parent

How to pass multiple props from parent to child component in Vue

How to pass array length to another component (from child to parent component) in vue.js?

I need to pass a parameter from Parent to Child

Vue.js - Pass data from child component to parent using emit but without button

Pass or Emit an event from child component to the parent component in Vue Js with Laravel

vue js how to pass data from parent, v-for loop list to child component with method

How can I find and display a object by its id(number value) from parent a parent to it's child

How can you pass data from a parent route to a child route in Vue.js nested routes?

Vue - Emit Child to parent

How can I pass a child component's state up to the parent?

How do I pass the value of Select from Child to Parent Component?

VueJs: How to pass a 'computed function' value from child component to the parent component using $emit(optionalPayload) and $on?

How can i pass multiple thing in one props from child to parent?

How can i pass data from a child widget to a parent widget

How can I pass a prop from child to parent component

how can i pass value from child to parent component in angular 2?

How can I pass a value from Child class to Parent class in JavaScript

Emit data from Child to parent vue 3

Vue 3: Emit event from child to parent

How can I access child component data from a parent in Vue?

How can I pass image url from parent component to child component via props [REACT.JS]

TOP Ranking

HotTag

Archive