VueJS 组件在获取数据时无法呈现

Question

我是 Vue.JS 和 JavaScript 的新手，所以我调试这些应用程序的时候很糟糕，特别是使用 Promise 和异步工具。 我正在尝试构建我的第一个从某处获取数据的 Vue 组件。 我正在使用 Google 表格 API 并返回样本表的一些单元格。 我的组件如下所示：

<template>
<ul>
  <li v-for="athlete in athletes" :key="athlete">
    {{ athlete }}
  </li>
</ul>
</template>

<script>
import readCopaPinheiros from '@/sheets/fetchData.js';

export default {
  name: 'AthletesTable',
  data () {
    return {
      loading: false,
      athletes: null
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true;
      readCopaPinheiros('inscritos').then(values => {
        this.loading = false;
        console.log(values)
        this.athletes = values
      });
    },
  } 
}
</script>

<style>
</style>

编辑 1

fetchData 脚本：

const fs = require('fs');
const { google } = require('googleapis');
const TOKEN_PATH = '';
const CREDENTIALS_PATH = ''

const credentials = JSON.parse(fs.readFileSync(CREDENTIALS_PATH, 'utf-8'));

const {
client_secret: clientSecret,
client_id: clientId,
redirect_uris: redirectUris,
} = credentials.installed;

const oAuth2Client = new google.auth.OAuth2(
  clientId, clientSecret, redirectUris[0],
);

const token = fs.readFileSync(TOKEN_PATH, 'utf-8');
oAuth2Client.setCredentials(JSON.parse(token));

async function readSheet(spreadsheetId, range) {
  const sheets = google.sheets({ version: 'v4', auth: oAuth2Client });

  return sheets.spreadsheets.values.get({
    spreadsheetId,
    range,
  })
  .then(res => res.data.values)
  .catch(err => console.log('Opa! Erro:', err));
}

function readSheetJsnofied(spreadsheetId, range) {
    return readSheet(spreadsheetId, range)
      .then(values => jsonifySheet(values));
}

function jsonifySheet(sheetValues) {
  const header = sheetValues[0];
  const values = sheetValues.slice(1);
  return values.map((row) => {
    const rowObj = ({});
    for (let i=0; i < row.length; i++) rowObj[header[i]] = row[i];
    return rowObj;
  });
}

const readCopaPinheiros = d => readSheetJsnofied('sheetId', d);

export default readCopaPinheiros

由于某种原因，组件不呈现。 我什至不知道该怎么做才能调试，我所有的控制台日志尝试都不会在控制台上打印一些东西。 有人可以帮我理解出了什么问题吗？

编辑 2

此错误仅在尝试获取数据时出现： 当我尝试直接在数据 function 中使用带有假值的占位符列表时，它可以工作。 我不认为这是渲染本身的问题，而是它如何与 created 和 fetchData 函数交互。

Answer 1

v-for="athlete in athletes"

此代码仅在athletes为数组时有效。 最初，您将其设置为 null，因此在来自 api 的数据到达之前，它将是 null。 但是该组件仍会尝试使用您的null运动员渲染该组件，并且会出错。 您可以尝试使用此解决方案：

data () {
  return {
      loading: false,
      athletes: []
  }
},