如何在Vue.js中將子元件的輸入資料傳遞給父元件並儲存到陣列中?
P粉832212776
P粉832212776 2024-03-27 11:02:16
0
2
461

** 例如,在這裡,當我單擊按鈕時,我將多一個組件,這意味著它將有新數據,所以我想在按下“保存數據”按鈕時將所有資訊收集到一個數組中,我希望,很容易理解

<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

** 它使用 Emit 從我的子元件取得資料

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

全部回覆(2)
P粉092778585

嘗試將發出事件的資料(從獲取元素)儲存到新的資料變數數組,並使用該數組


    sssccc
P粉418214279

您可以在父元件上儲存數據,請查看以下程式碼片段:

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板