Comment transmettre les données d'entrée du composant enfant au composant parent et les stocker dans un tableau dans Vue.js ?

Question

** Par exemple, ici, lorsque je clique sur le bouton, j'aurai un composant supplémentaire, ce qui signifie qu'il contiendra de nouvelles données. Je souhaite donc collecter toutes les informations dans un tableau lorsque le bouton "Enregistrer les données" est enfoncé, j'espère que c'est facile à comprendre

<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

** Il utilise Emit pour obtenir les données de mon composant enfant

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

Answer 1

Essayez de sauvegarder les données à partir desquelles l'événement a été émis (depuis l'obtention de l'élément) dans un nouveau tableau de variables de données et utilisez ce tableau

    sssccc

Answer 2

Vous pouvez enregistrer des données sur le composant parent, veuillez consulter l'extrait de code suivant :

Vue.component('Child', {
  template: `
  
    
      
        
          
          
          
          
          
          
          
          
          
          
        
      
    
  
  `,
  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
    }
  }
})

  
  [email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  [email protected]/dist/vuetify.min.css" rel="stylesheet">
  


  

    
      
        
          Add Categ & Key
          
            
          
          Save Data
          
{{ contentFields }}
        
      
    
  

  sssccc
  sssccc