Как реализовать vue пакет

Question

Новое в Vue и попытка использовать плагин с именем vue -toastr. Попытка использовать с Laravel и Vue уже включена с ним. Однако я получаю сообщение об ошибке «TypeError: Невозможно прочитать свойство $ toastr из undefined». Я очень новичок в Vue и мне трудно понять, что я сделал неправильно.

Шаги, которые я предпринял. Установил плагин через приложение npm.

. 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',
});

Ниже приведена JS часть моего Vue компонента.

<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>

Любая помощь с благодарностью

Answer 1

Заменить на это (добавлено 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.

Кроме того, вы можете использовать функцию стрелки в качестве обратного вызова, например:

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);
    });
}