VueJS - PapaParse get data in console.log but can't output on Screen

Question

This is the first time i'm using PapaParse. I'm trying to parse a remote CSV file, which works fine and store data, which is displaying in console.log but when i try to output with v-for loop. It's not working.

I'm using vue-papa-parse library.

Here is my code.

<template>
    <div class="uk-section">
        <div class="uk-container">
            <ul v-if="cases">
                <li v-for="(item, index) in cases" :key="index">{{item.date}} / {{item.World}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cases: [],
        }
    },
    methods: {
        totalCases(){
            let url = "https://covid.ourworldindata.org/data/ecdc/total_cases.csv";
            this.$papa.parse(url, {
                header: true,
                download: true,
                dynamicTyping: true,
                complete: function(results) {
                    this.cases = results.data;
                    console.log(this.cases);
                }
            })
        }
    },
    mounted() {
        this.totalCases();        
    }
}
</script>

No errors. I'm stuck here. Not sure what am i doing wrong. Would appreciate any help. Thanks.

Answer 1

The issue might be using the this inside the complete callback function. Try using arrow function instead

complete: (results) => {
   this.cases = results.data;
   console.log(this.cases);
}

Or assign this to another variable and use it inside the function

let self  = this;

complete: function(results) {
   self.cases = results.data;
   console.log(self.cases);
}