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);
},
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?
change the reader.onload line to the below to keep lexical scope for the this keyword
reader.onload = async (e) => {