How to implement vue package

Question

New in Vue and trying to use a plugin called vue-toastr. Trying to use with Laravel and Vue comes in already setup with it. However, I'm getting an error saying "TypeError: Cannot read property '$toastr' of undefined". I'm very new at Vue and am finding it difficult to figure out what I've done wrong.

Steps I took. Installed the plugin through npm.

app.js

require('./bootstrap');

import VueToastr from "vue-toastr";

window.Vue = require('vue');
Vue.use(VueToastr, {});

Vue.component('new-question', require('./components/questions/NewQuestion.vue').default);

const app = new Vue({
    el: '#app',
});

Below is the JS part of my Vue component.

<script>
    import VueToastr from "vue-toastr";

    export default {
        props: [
            'route',
            'method'
        ],
        components: {
            VueToastr
        },
        data(){
            return {
                // Initialized to zero to begin
                form: {},
            }
        },
        mounted() {

        },
        methods: {
            formSubmit: function(){
                console.log('form submit');
                axios({
                    method: this.method,
                    url : this.route,
                    data : this.form
                }).then(function (response) {
                    console.log(response);
                    this.$toastr.s("ssss");
                    //this.VueToastr.s("ssss");
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }

    }
</script>

Any help is greatly appreciated

Answer 1

Replace to this (added var self = this;):

formSubmit: function(){
    console.log('form submit');

    var self = this;        

    axios({
        method: this.method,
        url : this.route,
        data : this.form
    }).then(function (response) {
        console.log(response);
        self.$toastr.s("ssss");
        //this.VueToastr.s("ssss");
    }).catch(function (error) {
        console.log(error);
    });
}

Upd.

Also, you can use arrow function as callback like this:

formSubmit: function(){
    console.log('form submit');
    axios({
        method: this.method,
        url : this.route,
        data : this.form
    }).then((response) => {
        console.log(response);
        this.$toastr.s("ssss");
        //this.VueToastr.s("ssss");
    }).catch(function (error) {
        console.log(error);
    });
}