Cannot read property '$notify' of undefined

Question

I am trying to show notification from component. My component code:

<script>
    export default {
        data () {
            return {

            }
        },

        methods:
        {
            save_data()
            {
                axios.post(base_url + '/api/settings/save', this.form)
                  .then(function (response) {
                   this.$notify({title: 'Saved', message: 'Settings Saved', position: 'bottom-right', type: 'success' });
                  })
                  .catch(function (error) {
                    console.log(error);

                  });
            }
        },

    }
</script>

But I am getting error: Cannot read property '$notify' of undefined. What I am doing wrong?

Answer 1

You're referencing the wrong object. Using this in axios callback will reference to the axios post. Try this :

save_data() {
   let self = this;
   axios.post(base_url + '/api/settings/save', this.form)
      .then(function (response) {
         self.$notify({title: 'Saved', message: 'Settings Saved', position: 
         'bottom-right', type: 'success' });
      })
      .catch(function (error) {
         console.log(error);
      });
}