Bagaimana untuk menghantar data input komponen anak kepada komponen induk dan menyimpan ke dalam tatasusunan dalam Vue.js?

Question

** Sebagai contoh, di sini apabila saya mengklik butang saya akan mempunyai satu lagi komponen yang bermaksud ia akan mempunyai data baharu jadi saya ingin mengumpul semua maklumat ke dalam tatasusunan apabila butang "Simpan Data" ditekan , saya harap, adalah mudah difahami

<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

** Ia menggunakan Emit untuk mendapatkan data daripada komponen anak saya

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

Answer 1

Cuba simpan data dari mana peristiwa itu dipancarkan (daripada mendapatkan elemen) kepada tatasusunan pembolehubah data baharu dan gunakan tatasusunan itu

    sssccc

Answer 2

Anda boleh menyimpan data pada komponen induk, sila lihat coretan kod berikut:

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