I'm not sure why this is happening as both my methods (both parent and child are being called) but the actual data isn't being passed, even when I try to pass a simple string the data is 'undefined' when logged from my parent that receives the data from emit :(

can someone help me out or maybe provide an explanation?

my app is rendered like so in the dom (this is all a part of an html injection not vue-cli)

<div id="app">
    <div>
      <b-button v-b-modal.modal-1>upload files</b-button>

      <b-modal id="modal-1" title="BootstrapVue" ok-title="upload">
          <div>
              <file-uploader v-on:child-to-parent="logChildData()"></file-uploader>
          </div>
      </b-modal>
    </div>
  </div> 

here's my child ponent

//ponent constructor
var fileUploader = Vue.extend({
  template: ' <div><div id="container" class="flexContainer"><div v-for="img in images" :key="img.name"><div :id=img.name><img height="80px" width="80px" :src=img.src alt="uploaded image"><button @click="removeItem(img.name)">X</button></div></div></div><input type="file" multiple @input="handleUpload($event)"></div>',
  data() {
      return {
        images:[],
        pdfs:[], 
      }
    },

    methods: {

      //send files back up to parent ponent where they can be manipulated
        sendDatatoParent(){
          console.log('sending data to parent')
          this.$emit('child-to-parent', 'a string to send')
        },


      async handleUpload(e) {

          //check file type and sort into pdfs or images based on their file extension 
          var files = e.target.files
          for(i = 0; i< files.length; i++){

            if(files[i].type === 'application/pdf'){ 
              this.pdfs.push(files[i])

            }else{
              if(files[i].type === 'image/jpeg' || files[i].type === 'image/png' || files[i].type === 'image/gif' || files[i].type === 'image/jpg'){

                //create the thumbnail img and add it to the image object
                //console.log(files[i].name)
                this.buildUrl(files[i])
              }
            }
          }
          //console.log('pdfs',this.pdfs)
          //console.log('images',this.images)

          this.sendDatatoParent()  
        },

    },    
})

// register the file uploader ponent inside your app so your app has a name to reference the ponent by
Vueponent('file-uploader', fileUploader)

here is my parent where I should be able to log the data from $emit

// create the main vue app (this contains and renders all your ponents, it is the parent)
new Vue({
  el: '#app',
  methods:{  

    /*
       listens for the custom $emit event (childToParent) which is passed to your child ponent (see above ^)
       when fired it will grab the child's data and pass the value here (the parent ponent)
    */
    logChildData(value){
      console.log('logging the value from emit',value)
    }

  }
})

I'm not sure why this is happening as both my methods (both parent and child are being called) but the actual data isn't being passed, even when I try to pass a simple string the data is 'undefined' when logged from my parent that receives the data from emit :(

can someone help me out or maybe provide an explanation?

my app is rendered like so in the dom (this is all a part of an html injection not vue-cli)

<div id="app">
    <div>
      <b-button v-b-modal.modal-1>upload files</b-button>

      <b-modal id="modal-1" title="BootstrapVue" ok-title="upload">
          <div>
              <file-uploader v-on:child-to-parent="logChildData()"></file-uploader>
          </div>
      </b-modal>
    </div>
  </div> 

here's my child ponent

//ponent constructor
var fileUploader = Vue.extend({
  template: ' <div><div id="container" class="flexContainer"><div v-for="img in images" :key="img.name"><div :id=img.name><img height="80px" width="80px" :src=img.src alt="uploaded image"><button @click="removeItem(img.name)">X</button></div></div></div><input type="file" multiple @input="handleUpload($event)"></div>',
  data() {
      return {
        images:[],
        pdfs:[], 
      }
    },

    methods: {

      //send files back up to parent ponent where they can be manipulated
        sendDatatoParent(){
          console.log('sending data to parent')
          this.$emit('child-to-parent', 'a string to send')
        },


      async handleUpload(e) {

          //check file type and sort into pdfs or images based on their file extension 
          var files = e.target.files
          for(i = 0; i< files.length; i++){

            if(files[i].type === 'application/pdf'){ 
              this.pdfs.push(files[i])

            }else{
              if(files[i].type === 'image/jpeg' || files[i].type === 'image/png' || files[i].type === 'image/gif' || files[i].type === 'image/jpg'){

                //create the thumbnail img and add it to the image object
                //console.log(files[i].name)
                this.buildUrl(files[i])
              }
            }
          }
          //console.log('pdfs',this.pdfs)
          //console.log('images',this.images)

          this.sendDatatoParent()  
        },

    },    
})

// register the file uploader ponent inside your app so your app has a name to reference the ponent by
Vue.ponent('file-uploader', fileUploader)

here is my parent where I should be able to log the data from $emit

// create the main vue app (this contains and renders all your ponents, it is the parent)
new Vue({
  el: '#app',
  methods:{  

    /*
       listens for the custom $emit event (childToParent) which is passed to your child ponent (see above ^)
       when fired it will grab the child's data and pass the value here (the parent ponent)
    */
    logChildData(value){
      console.log('logging the value from emit',value)
    }

  }
})

• javascript
• html
• vue.js

Share Improve this question Follow asked Jun 3, 2020 at 18:09 monsterpiecemonsterpiece 77922 gold badges1414 silver badges4040 bronze badges 3

• have you tried checking if there's an error in the console? – Julian Paolo Dayag Commented Jun 3, 2020 at 18:16
• 1 I'm not a Vue expert, but your v-on handler is logChildData(). That looks awfully like a function call with no argument. I think perhaps you should do logChildData or logChildData($event). – chash Commented Jun 3, 2020 at 18:17
• I don't get any error unfortunately, when I check the console it only shows me the return value of logChildData() which is: logging the value from emit. undefined – monsterpiece Commented Jun 3, 2020 at 18:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In your child ponent tag in parent, you are calling the parent function with no parameter, so the value will not be there. Either pass $event or remove the parenthesis altogether (remended). So do:

v-on:child-to-parent="logChildData"

or alternatively:

v-on:child-to-parent="logChildData($event)"