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