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

webprogrammer · Accepted Answer · 2020-01-28 23:06:23Z

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

edited Jan 28, 2020 at 23:06

answered Jan 28, 2020 at 22:59

webprogrammer

2,4733 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ela Buwa Over a year ago

it worked. Can you explain the var self = this a bit more. Is there some sort of docs to read more on this?

Sraw Over a year ago

When you enter another scope such as an anonymous function, this is pointing to that scope(Here is anonymous function). If you still want to access the parent scope(Here is the Vue instance), you need to save the reference. It is not a trick in Vue but a common trick in JS.

webprogrammer Over a year ago

@ElaBuwa, I have made an update to my answer about using arrow functions. this within then callback have another context so you need to use another (for example, self) variable to reference to a right (vue object) context. Or you can use arrow function instead which is although without its own bindings to the this.

Collectives™ on Stack Overflow

How to implement vue package

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related