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

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

29.01.2020 01:55:49 Просмотров 34 Источник

Новый в 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>

Любая помощь очень ценится

У вопроса есть решение - Посмотреть?

Ответы - Как реализовать пакет vue / How to implement vue package

Является ответом!
webprogrammer

29.01.2020 01:59:57

Заменить на это (добавлен 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);
    });
}
https://stackoverflow.com/questions/59958333/how-to-implement-vue-package/59958370#comment106035323_59958370
это сработало. Можете ли вы объяснить var self = это немного больше. Есть ли какие-то документы, чтобы прочитать больше об этом?
https://stackoverflow.com/questions/59958333/how-to-implement-vue-package/59958370#comment106035421_59958370
Когда вы вводите другую область, например анонимную функцию, это указывает на эту область(здесь анонимная функция). Если вы все еще хотите получить доступ к родительской области(вот экземпляр Vue), вам нужно сохранить ссылку. Это не трюк в Vue, а обычный трюк в JS.
https://stackoverflow.com/questions/59958333/how-to-implement-vue-package/59958370#comment106035442_59958370
@ElaBuwa, я обновил свой ответ об использовании функций со стрелками. thisв пределах thencallback есть другой контекст, поэтому вам нужно использовать другую (например, self) переменную для ссылки на контекст right (Vue object). Или вы можете использовать функцию стрелки вместо этого, которая, хотя и без собственных привязок к этому.
Закрыть X