Как вызвать функцию в Vue Component без лямбда-выражения - PullRequest
Новая
       13

Как вызвать функцию в Vue Component без лямбда-выражения

0 голосов
/ 17 июня 2019

Я использую Vue Js 2.6, и сделал этот компонент: 

Vue.component('confirmmodal', {
template: '',
data: function () {
    return {
        showModal: false,
        title: '',
        text: '',
        confirmMethod: null,
        dismissMethod: null,
        compiledTemplate: null
    };
},
methods: {
    initTemplate: function (result) {
        this.compiledTemplate = Vue.compile(result); //called from created
        return;
    },
    show: function (t) {
        this.showModal = true;
    },
    ok: function () {
        this.showModal = false;
        if (this.confirmMethod) {
            this.confirmMethod();
        }
    },
    cancel: function () {
        this.showModal = false;
        if (this.dismissMethod) {
            this.dismissMethod();
        }
    }
},
render: function (createElement) {
    if (this.compiledTemplate) {
        return this.compiledTemplate.render.call(this, createElement);
    }
},
created: function () {
    site.apiGetHtml("/home/ConfirmModal/", null, this.initTemplate, null, null);
    modalhandle.$on('toggleConfirm', content => {
        this.title = content.title;
        this.text = content.text.replace('§', '<br />');
        this.confirmMethod = content.confirm;
        this.dismissMethod = content.dismiss;
        //this.$root.$options.components.confirmmodal.options.methods.show(content);
        this.show();
    });
}
});

Возможно, это плохой способ реализовать его, но в моих проектах ASP.NET я сделал несколько частичных представлений, загруженных в функцию site.apiGetHtml, скомпилированных в компонент при его создании. И это отлично работает.

Компонент отлично работает в Chrome и других браузерах, поддерживающих ES6. Но наш клиент требует поддержки IE11 - и здесь возникает проблема, поскольку IE11 не поддерживает лямбда-выражения: 

     content => {
        this.title = content.title;
        this.text = content.text.replace('§', '<br />');
        this.confirmMethod = content.confirm;
        this.dismissMethod = content.dismiss;
        this.show();
     }

Когда я преобразовываю лямбда-выражение в функцию, переменная 'this' не может найти функцию show в компоненте (даже в Chrome). Как вы можете видеть, я пытался вызвать функцию show - через область действия this. $ Root.components, но, похоже, компонент не инициализирован. Ничего не происходит.

1 Ответ

0 голосов
/ 18 июня 2019

Попробуйте назначить это переменной, чтобы ее контекст не терялся в функции: 

let self = this;            
function(content) {
        self.title = content.title;
        self.text = content.text.replace('§', '<br />');
        self.confirmMethod = content.confirm;
        self.dismissMethod = content.dismiss;
        self.show();
     }
...