如何实现vue包

Question

Vue 中的新功能并尝试使用名为 vue-toastr 的插件。 尝试与 Laravel 和 Vue 一起使用已经设置好了。 但是，我收到一条错误消息，提示“TypeError：无法读取未定义的属性 '$toastr'”。 我是 Vue 的新手，很难弄清楚我做错了什么。

我采取的步骤。 通过 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',
});

下面是我的 Vue 组件的 JS 部分。

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

更新。

另外，你可以像这样使用箭头函数作为回调：

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