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
JavaScript
x
23
23
1
async loadcsv(element){
2
let reader = new FileReader();
3
let file = element[0].file
4
5
reader.onload = async function (e){
6
const data = e.target.result;
7
let csvParsed = await d3.csvParse(reader.result);
8
let collection = []
9
csvParsed.forEach(function (element) {
10
collection.push({
11
id: Math.floor(Math.random() * 10000000),
12
country : element['Country'],
13
email : element['Email id'],
14
poi_serial : element['Serial'],
15
status: "New"
16
})
17
});
18
// Not working, shows it's not defined
19
// this.$emit('csvCollection', collection)
20
}
21
reader.readAsText(file);
22
},
23
Advertisement
Answer
change the reader.onload
line to the below to keep lexical scope for the this
keyword
JavaScript
1
2
1
reader.onload = async (e) => {
2