Passing arrays from child to parent components in VueJS: A comprehensive guide

Question

Passing arrays from child to parent components in VueJS: A comprehensive guide

I am currently utilizing the Vue-Multiselect plugin and attempting to send data up to a parent component so that a backend API can update certain records. However, I am facing challenges in achieving this successfully.

My approach (explained in detail) along with a CodeSandBox Demo can be viewed for a better understanding. Note: To view the functionality of the multiselect UI, navigate to POST-->ACME WIDGET and click "Edit" to interact with the multiselect plugin.

In my child component CustomerPOCSelect.vue, there are events such as onRemove and onSelect which push data into arrays named pocsToRemove and pocsToAdd respectively.

However, I need assistance in bridging the gap between this point and the parent component

EditPost.vue</code, where I can utilize the <code>onSubmitUpdate

event handler to actually update the server. Whenever a user makes changes to the multiselect input (additions or removals) and clicks the UPDATE POST button, I must pass on the emitted data to the onSubmitUpdate method.

EditPost.vue

<template>
  // Code for EditPost.vue template
</template>

<script>
// Script for EditPost.vue
</script>

CustomerPOCSelect.vue

<template>
  // Code for CustomerPOCSelect.vue template
</template>

<script>
// Script for CustomerPOCSelect.vue
</script>

javascript vue.js vuejs2 vue-cli vue-multiselect

Answer 1

Answer №1

To achieve this, you have the option of using either Vuex or leveraging custom events. Below is an illustration demonstrating how custom events can be utilized:

Parent Component

...
<ChildComponent @toParent="handler"/>

methods: {
  handler(value) {
    // Output Data Received from Child Component
    console.log(value) // "Dummy Data"
  },
}
...

ChildComponent

...
data() {
  return {
    myData: "Dummy Data"
  }
},
mounted() {
  // The emission of this event can occur in any method, not just in mounted
  this.$emit('toParent', this.myData)
},
...

Answer 2

To achieve this, you have the option of using either Vuex or leveraging custom events. Below is an illustration demonstrating how custom events can be utilized:

Parent Component

...
<ChildComponent @toParent="handler"/>

methods: {
  handler(value) {
    // Output Data Received from Child Component
    console.log(value) // "Dummy Data"
  },
}
...

ChildComponent

...
data() {
  return {
    myData: "Dummy Data"
  }
},
mounted() {
  // The emission of this event can occur in any method, not just in mounted
  this.$emit('toParent', this.myData)
},
...

Passing arrays from child to parent components in VueJS: A comprehensive guide

Answer №1

Similar questions

There was a TypeError encountered in angular-highcharts, stating that it is not possible to read the property '0' of an undefined

You should be providing a string value as expected. It seems that you may have overlooked exporting your component from the correct file it was defined in, or perhaps there is confusion with default and named

Guide on exporting data to PDF using Vuetify

Nuxtjs component fails to hot reload when v-if condition is modified

Using Rails to fetch a remote page using AJAX

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Is an audio player/playlist necessary for showcasing a mix engineer's skills in their

Is there a way to add a scrollbar to the ChartJS tooltip to avoid data

javascriptchange the format from <string, string[]> to <string, string>

Encountering a surprise syntax error while trying to reference JavaScript from HTML?

What is the technique for arranging the display of a component in React?

What caused the failure of the ++ operator in production mode?

How can we transform words with double "OO" in a paragraph into green squares using React? For instance, changing "clooney" to "cl[green square]ey"

When combining Puppeteer with Electron, an error stating "Browser revision not found" may occur. However, this issue does not arise when running with Node

My jQuery Ajax seems to have a glitch, can someone help me figure out

Encountering a problem with a Vue component error stating "Unable to convert undefined or null to object"

Forever is causing email sending from the node server to fail

Tips for sending a div value that is not included in the model to the backend controller action

When attempting to decrypt with a password using CryptoJS, AES decryption returns an empty result

Simple methods to minimize the iteration of array loops in Node.js