Vue将数据从模态子级发送到父级方法

时间:2019-03-26 19:44:54

标签: vue.js modal-dialog parent-child vsprops

我需要帮助将v模型从模态子对象发送到父方法。

这是带有vmodel tplProperty的模式。

<template>
  <mdb-modal centered v-if="characteristicsModal">
      <mdb-modal-header>
        <mdb-modal-title>Neue Gruppe anlegen</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>
        <div style="padding-left: 20px;">Eigenschaftname für {{ currentSelectedGroup }}
          <input type="text" style="width: 90%;" v-model="tplProperty" name="tplProperty"></div>
      </mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="success" @click.native="saveProperty">Speichern</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
</template>
<script>
  export default {
    name: 'AddCharacteristicsModal',
    components: {

    },
    props: {
      currentSelectedGroup: '',
    },
    data() {
      return {
        tplProperty:''
      }
    }
    methods: {

      saveProperty(){
        this.$emit('saveProperty', this.tplProperty);
      },
    }
  }
</script>

这是父母:

<AddCharacteristicsModal 
@saveProperty="saveProperty" v-bind:currentSelectedGroup="currentSelectedGroup" />

在data()中:

tplProperty: '',

和父方法:

        saveProperty(selectedGroup) {

            var self = this;
            // var selectedGroupKey = selectedGroup.toLowerCase().replace(/\s/g, '').replace(/[^a-zA-Z0-9]/g, '');
console.log("******SAVEPROP"+ selectedGroup);
            if(this.properties[selectedGroup] == undefined) {
                this.properties[selectedGroup]=[self.tplProperty];
            } else {
                Object.keys(this.properties).forEach(function (key) {
                    if(key == selectedGroup) {
                        var mergeList = self.properties[key].concat([self.tplProperty]);
                        //console.log('mergeList:'+JSON.stringify(mergeList));
                        self.properties[key] = mergeList;
                    }
                });
            }
            this.currentSelectedGroup = selectedGroup;
            this.tplProperty ='';

            this.templates[this.selectedTemplate].property = this.properties;

            console.log("hallo");

            //console.log("P::"+JSON.stringify(this.properties));
            //console.log("P:TZTZTZ:"+JSON.stringify(this.templates[this.selectedTemplate].groups));

            // this.allTemplate[this.selectedTemplate] = this.templates;
            //localStorage.removeItem("allTemplates");
            //localStorage.setItem('allTemplates', JSON.stringify(this.allTemplate));
            // console.log("jijiji:"+JSON.stringify(this.templates));
        },

子v模型tplProperty保存在方法的selectedGroup参数中,但应保存在父tplProperty中。

寻求帮助:-)

0 个答案:

没有答案