I know about lexical scope that this keyword is pointing to the window and not Vue

But how do I make it point to Vue?

What I am trying to do is get csv data and parse it, I'm using d3 to parse the data it's working fine, I am just unable to emit the event with the data because of the scope issue

    async loadcsv(element){
        let reader = new FileReader();
        let file = element[0].file

        reader.onload =  async function (e){
            const data = e.target.result;
            let csvParsed = await d3.csvParse(reader.result);
            let collection = []
            csvParsed.forEach(function (element) {
                collection.push({
                    id: Math.floor(Math.random() * 10000000),
                    country : element['Country'],
                    email : element['Email id'],
                    poi_serial : element['Serial'],
                    status: "New"
                })
            });
            // Not working, shows it's not defined
            // this.$emit('csvCollection', collection) 
        }
        reader.readAsText(file);
    },

CodePudding user response：

You can store the vue instance in a variable before the async function you are using like let self = this. or you can use an arrow function instead of the function you are using. see this similar question VueJs this.method is not a function? How to call a method inside another method in Vuejs?

CodePudding user response：

change the reader.onload line to the below to keep lexical scope for the this keyword

reader.onload =  async (e) => {