CODEWITHSUNDEEP
javascriptvuejs2emit
BostonAreaHuman
BostonAreaHuman

Reputation: 1461

VueJS $emit not working to push data to parent

So I'm having an issue in getting $emit to work to send up data to the parent. What I wish to do is on click of the submit button take the data from the inputs and then send the results up to the parent. I'm using aa prototype JSON block just to test the flow as I'm new to Vue.

Here is some filler text as I need to get over the hump of too much code vs not enough text. Here is some filler text as I need to get over the hump of too much code vs not enough text.

TypeError: Cannot read property '$emit' of undefined at eval (SearchBar.vue?e266:42)

<template>
    <div class="searchbox">
         <datepicker v-model="fromdate" placeholder="Start Date" name="fromdate" class="datepicker"></datepicker>
         <datepicker v-model="todate" placeholder="End Date" name="todate" class="datepicker"></datepicker>
         <input type="text" v-model="namesearch" name="namesearch" placeholder="Username/Lastname"/>
         <input type="text" v-model="titlesearch" name="titlesearch" placeholder="Title / Short Desc."/>
         <input type="text" v-model="descsearch" name="descsearch" placeholder="Long Desc"/> 
         <button name="refreshresults" v-on:click="getresults">Do Search</button>
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker/dist/vuejs-datepicker.common.js'
import axios from 'axios'
export default {
    name: 'SearchBar',
    components:{
     Datepicker
  },
  data(){
    return {
    fromdate:"",
    todate:"",
    namesearch:"",
    titlesearch:"",
    descsearch:""
    }
  },
  methods:{
      getresults: function(e){
        const searchcriteria = {
            fromdate: this.fromdate,
            todate: this.todate,
            namesearch: this.namesearch,
            titlesearch: this.titlesearch,
            descsearch: this.descsearch
        }
            axios.get('https://jsonplaceholder.typicode.com/todos')
            .then(function (response) {
                // handle success
                console.log(response.data);
                this.$emit('sendingInfo',searchcriteria);
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                console.log('catchall');
            });

    }
  }
}
</script>

<style>
.vdp-datepicker{
    display:inline-block;
}

INPUT,BUTTON{
    margin:5px;
    display: inline-block;
    padding:5px;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}
</style>

Upvotes: 2

Views: 1945

Answers (1)

Terry
Terry

Reputation: 66103

That is because the this in your axios .then(function() {...}) callback is not referring to your VueJS component. If you try logging this to console, you will see that it no longer points to your VueJS component.

Since you're using ES6, just use arrow function, so that it preserves the lexical this from the enclosing scope:

axios.get('https://jsonplaceholder.typicode.com/todos')
  .then(response => {
      // handle success
      console.log(response.data);
      this.$emit('sendingInfo',searchcriteria);
  })

Upvotes: 3

Related Questions