VueJS - PapaParse 在 console.log 中获取数据但无法在屏幕上输出

Question

这是我第一次使用 PapaParse。我正在尝试解析一个远程 CSV 文件，该文件工作正常并存储数据，该文件显示在 console.log 中，但是当我尝试使用 v-for 循环输出时。没用。

我正在使用 vue-papa-parse 库。

这是我的代码。

<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>

没有错误。我被困在这里了。不知道我做错了什么。将不胜感激任何帮助。谢谢

Answer 1

问题可能出在 complete 回调函数中使用 this。尝试改用箭头函数

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

或者将this赋给另一个变量并在函数内部使用

let self  = this;

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

VueJS - PapaParse 在 console.log 中获取数据但无法在屏幕上输出

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

javascript

vue.js

papaparse