How can we collect child component input data and store it in an array within a Vue.js parent component?

Question

How can we collect child component input data and store it in an array within a Vue.js parent component?

** To illustrate, when the button is clicked, a new component is added along with new data. Therefore, I would like to collect all this information into one array when I click the Save Data button. I hope this explanation makes sense.

<Child v-for="count in btnNumber" :key="count" @showData="getElements" />

<v-btn
  color="primary"
  elevation="10"
  class="space"
  large
  @click="duplicateEl"
  >Add Categ & Key</v-btn
>
v-btn
      color="secondary"
      elevation="13"
      class="btnEl"
      dark
      large
      @click="getResult"
      >Save Data</v-btn

** The data is obtained from the child component using Emit.

methods:{
               getElements(emitPayload) {
              this.selectedChildCategory = emitPayload.selectedCateg;
              this.selectedChildKey = emitPayload.selectedKey;
              this.selectedChildLanguage = emitPayload.selectedLang;
              this.selectedChildContent = emitPayload.selectedCon;
        }
    }
 duplicateEl() {
  this.btnNumber++;
}

https://i.sstatic.net/Yr5l5.png

https://i.sstatic.net/9iTYI.png

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

If you want to store data on the parent component, here is an example code snippet that demonstrates how it can be done:

Vue.component('Child', {
  template: `
  <v-form>
    <v-container>
      <v-row>
        <v-col>
          <v-select
            :items="categories"
            label="Category"
            dense
            outlined
            v-model="content.cat"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="keys"
            label="Key"
            dense
            outlined
            v-model="content.key"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="langs"
            label="Lang"
            dense
            outlined
            v-model="content.lang"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="contents"
            label="Cont"
            dense
            outlined
            v-model="content.cont"
            @change="setD"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
  `,
  props: ['conte'],
  data() {
    return {
      content: this.conte,
      categories: ['first', 'second', 'third'],
      keys: [1,2,3],
      langs: ['g', 'h', 'j'],
      contents: ['aaa', 'bbb', 'ccc']
    }
  },
  methods: {
   setD() {
      this.$emit('show', this.content);
    },
  },
})

new Vue({
  vuetify: new Vuetify(),
  el: "#app",
  data() {
    return {
      contentFields: [{id: 0, cat: '', key: '', lang: '', cont: ''}],
      showData: false
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length 
      this.contentFields.push({id: newI, cat: '', key: '', lang: '', cont: ''})
    },
    getElements(e){
      const newData = this.contentFields.map(obj => {
        if(obj.id === e.id) 
           return { ...obj }
        return obj
      });
    },
    getResult() {
      this.showData = !this.showData
    }
  }
})

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0868f8e94a0d6ce98">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6c6f7f6e737c635a283462">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-btn
            color="primary"
            elevation="10"
            class="space"
            large
            @click="addInput"
          >Add Categ & Key</v-btn>
          <v-container v-for="(content, i) in contentFields" :key="i">
            <child :conte="content" @show="getElements" />
          </v-container>
          <v-btn
            color="secondary"
            elevation="13"
            class="btnEl"
            dark
            large
            @click="getResult"
          >Save Data</v-btn>
          <div v-if="showData">{{ contentFields }}</div>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562023331664782e">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a4b5a8a7b881f3efb9">[email protected]</a>/dist/vuetify.js"></script>

Answer 2

If you want to store data on the parent component, here is an example code snippet that demonstrates how it can be done:

Vue.component('Child', {
  template: `
  <v-form>
    <v-container>
      <v-row>
        <v-col>
          <v-select
            :items="categories"
            label="Category"
            dense
            outlined
            v-model="content.cat"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="keys"
            label="Key"
            dense
            outlined
            v-model="content.key"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="langs"
            label="Lang"
            dense
            outlined
            v-model="content.lang"
            @change="setD"
          ></v-select>
          </v-col>
          <v-col>
          <v-select
            :items="contents"
            label="Cont"
            dense
            outlined
            v-model="content.cont"
            @change="setD"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
  `,
  props: ['conte'],
  data() {
    return {
      content: this.conte,
      categories: ['first', 'second', 'third'],
      keys: [1,2,3],
      langs: ['g', 'h', 'j'],
      contents: ['aaa', 'bbb', 'ccc']
    }
  },
  methods: {
   setD() {
      this.$emit('show', this.content);
    },
  },
})

new Vue({
  vuetify: new Vuetify(),
  el: "#app",
  data() {
    return {
      contentFields: [{id: 0, cat: '', key: '', lang: '', cont: ''}],
      showData: false
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length 
      this.contentFields.push({id: newI, cat: '', key: '', lang: '', cont: ''})
    },
    getElements(e){
      const newData = this.contentFields.map(obj => {
        if(obj.id === e.id) 
           return { ...obj }
        return obj
      });
    },
    getResult() {
      this.showData = !this.showData
    }
  }
})

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0868f8e94a0d6ce98">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6c6f7f6e737c635a283462">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-btn
            color="primary"
            elevation="10"
            class="space"
            large
            @click="addInput"
          >Add Categ & Key</v-btn>
          <v-container v-for="(content, i) in contentFields" :key="i">
            <child :conte="content" @show="getElements" />
          </v-container>
          <v-btn
            color="secondary"
            elevation="13"
            class="btnEl"
            dark
            large
            @click="getResult"
          >Save Data</v-btn>
          <div v-if="showData">{{ contentFields }}</div>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562023331664782e">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a4b5a8a7b881f3efb9">[email protected]</a>/dist/vuetify.js"></script>

Answer 3

Answer №2

Consider storing the emitted data in a new array variable and utilizing that for your operations

<template>
      <div>
        <Child
          v-for="count in btnNumber"
          :key="count"
          @showData="getElements(count)"
        />
        <!-- BUTTONS HERE -->
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          elementsEmittedDataArray: [], // Store emitted data in this array
        };
      },
      methods: {
        getElements(countIndex, emitPayload) {
          const data = {
            uniqueIndex: countIndex,
            selectedChildCategory: emitPayload.selectedCateg,
            selectedChildKey: emitPayload.selectedKey,
            selectedChildLanguage: emitPayload.selectedLang,
            selectedChildContent: emitPayload.selectedCon,
          };
          // Update or add data to the array based on uniqueIndex
          const index = this.elementsEmittedDataArray.findIndex(
              (element) => element.uniqueIndex === countIndex
          );
          if (index !== -1) {
              this.elementsEmittedDataArray[index] = data;
          } else {
              this.elementsEmittedDataArray.push(data);
          }
        },
        duplicateEl() {
          this.btnNumber++;
        },
    
        submitData(){
            // Utilize the stored array for further processing
            console.log(this.elementsEmittedDataArray);
        }
    
      },
    };
    </script>

Answer 4

Consider storing the emitted data in a new array variable and utilizing that for your operations

<template>
      <div>
        <Child
          v-for="count in btnNumber"
          :key="count"
          @showData="getElements(count)"
        />
        <!-- BUTTONS HERE -->
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          elementsEmittedDataArray: [], // Store emitted data in this array
        };
      },
      methods: {
        getElements(countIndex, emitPayload) {
          const data = {
            uniqueIndex: countIndex,
            selectedChildCategory: emitPayload.selectedCateg,
            selectedChildKey: emitPayload.selectedKey,
            selectedChildLanguage: emitPayload.selectedLang,
            selectedChildContent: emitPayload.selectedCon,
          };
          // Update or add data to the array based on uniqueIndex
          const index = this.elementsEmittedDataArray.findIndex(
              (element) => element.uniqueIndex === countIndex
          );
          if (index !== -1) {
              this.elementsEmittedDataArray[index] = data;
          } else {
              this.elementsEmittedDataArray.push(data);
          }
        },
        duplicateEl() {
          this.btnNumber++;
        },
    
        submitData(){
            // Utilize the stored array for further processing
            console.log(this.elementsEmittedDataArray);
        }
    
      },
    };
    </script>

How can we collect child component input data and store it in an array within a Vue.js parent component?

Answer №1

Answer №2

Similar questions

Attempting to retrieve the styling for the placeholder attribute of a specific element

Update the values and attributes of DOM elements upon form submission

Organizing quiz inquiries within an array of objects

Calculate the total price from a combination of HTML and JavaScript options without altering the values

Issue with Vue not updating state variable

Tips for resolving CORS issue when making calls to a third-party API in Nuxt 3

Require assistance with debugging an issue in an online game played through a web browser

How can JavaScript be used to identify duplicate elements within an array?

Explore button that gradually decreases max-height

Exporting data from HTML tables with a simple click

jQuery tabs with carousel navigation

Assigning an array of objects within an AJAX request

If an object is discovered in the array, increase its value; if not, add it to the array

Take action if the variable within the interval function contains a specific value

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

What is the process of selecting a hyperlink?

React component refuses to re-render

Adding a CSS link to the Vue CLI build result

Converting JSON to HTML without the use of external libraries

Flask caches JSON files automatically