title: Vuejs modal component cannot emit after axios call
body: <p>My app is declared like this in app.js</p>
  
  <pre><code>Vue.component('sale', require('./components/Sale.vue'));
  
  const app = new Vue({
  el: '#app',
  data: {
      showModal: false
  },
  });
  </code></pre>
  
  <p>My main index.blade file @yields the content of my view, and this view simply contains my custom component like this</p>
  
  <pre><code>&lt;sale v-if="showModal" @hide="showModal=false"&gt;&lt;/sale&gt;
  </code></pre>
  
  <p>As you can see, its using the <code>showModal</code> to determine when it shows the modal form on top of the main page.</p>
  
  <p>The component in brief is declared here with the form submit option:</p>
  
  <pre><code>&lt;template name="sale"&gt;
    &lt;form class="form-horizontal" role="form" action="/sales/save" method="POST" @submit.prevent="save"&gt;
  </code></pre>
  
  <p>This save method is called correctly and the axios post is working successfully.</p>
  
  <p>I have a standard form inside the modal page and the methods are declared here, which u can see uses axios to post to my controller - again, the post is successful.</p>
  
  <pre><code>methods: {
    close(){        
      this.$emit('hide');
    },
    save(){
      console.log('SOLD');
      console.log(this.$data);
      axios.post('/sales/save', this.$data)
        .then(function (response) {
          this.$emit('hide');
        })
        .catch(function(error) {
          console.log('NO ' , error);
        });
    }
  }
  </code></pre>
  
  <p>The close method also works as I expect, using the emit to change the value of <code>showModal</code>, closing the dialog.</p>
  
  <p>What is not working, is after the post, the <code>.then</code> function is giving me an error with the same call to emit: <code>TypeError: Cannot read property '$emit' of undefined</code>.</p>
  
  <p>In fact, the <code>.catch</code> is catching the error with the emit inside the <code>.then</code> function (not what i was expecting - that it would be catching axios POST errors).</p>
  
  <p>Essentially i'm not sure how to close the modal in the same manner, once the axios call is successful.</p>
  
  <p>Edit: added:</p>
  
  <pre><code>mounted() {
    const self = this;
  }
  </code></pre>
  
  <p>and changed emit reference</p>
  
  <pre><code>self.$emit('hide');
  </code></pre>
  
  <p>I'm not sure i understand the rest of that post </p>