0

In my project I need to setup an IE11 compatible VueJs application where I'm using polyfills for fetch and promises.
Now my problem is, that the IE11 obviously also doesn't support "Fat arrows" as well. Using functions instead of Fat arrows I'm loosing my context so that I'm not able to set the resposne to my data.

let app = new Vue({
    data: {
        myindex : []
    },
    beforeMount: function(){
        myClient.getIndex().then((index) => this.myIndex = index); //This does not work in IE11 due to the fat arrow

        myClient.getIndex().then(function(index) => { 
            this.myIndex = index
        }); // This does not work due to the missing context. this.myIndex is not known here...
    }
});

Is there any "native" way to set the response/result to data.

SNO
  • 793
  • 1
  • 10
  • 30
  • 1
    `myClient.getIndex().then(function(index) => { this.myIndex = index }.bind(this));` – Jaromanda X Dec 04 '19 at 07:40
  • 1
    Or, create a variable `var self = this` outside the callback. Inside, use `self.myIndex = index` – adiga Dec 04 '19 at 07:42
  • Try to use the [Babel](https://babeljs.io/repl) to translate the ES6 script to ES5 code, like this:`var app = new Vue({ data: { myindex: [] }, beforeMount: function beforeMount() { var _this = this; myClient.getIndex().then(function (index) { return _this.myIndex = index; }); } });` – Zhi Lv Dec 04 '19 at 09:43

0 Answers0