Wie übergebe ich Eingabedaten einer untergeordneten Komponente an die übergeordnete Komponente und speichere sie im Array in Vue.js?
P粉832212776
P粉832212776 2024-03-27 11:02:16
0
2
409

** Wenn ich hier zum Beispiel auf die Schaltfläche klicke, erhalte ich eine weitere Komponente, was bedeutet, dass sie über neue Daten verfügt. Ich möchte also alle Informationen in einem Array sammeln, wenn die Schaltfläche „Daten speichern“ gedrückt wird, was hoffentlich der Fall ist leicht zu verstehen

<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

** Es verwendet Emit, um die Daten von meiner untergeordneten Komponente abzurufen

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

Antworte allen(2)
P粉092778585

尝试将发出事件的数据(从获取元素)保存到新的数据变量数组,并使用该数组


    
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 }}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!