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

【问题标题】：VueJS Component failing to render when fetching dataVueJS 组件在获取数据时无法呈现
【发布时间】：2020-07-11 01:54:03
【问题描述】：

我是 Vue.JS 和 JavaScript 的新手，所以我在调试这些应用程序时遇到了很多麻烦，尤其是使用 Promise 和异步工具。我正在尝试构建我的第一个从某处获取数据的 Vue 组件。我正在使用 Google Sheets 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

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

【问题讨论】：

能否打开浏览器调试工具（F12），点击“网络”标签，查看对Google Sheets API的网络请求是否执行成功？
没有明确调用 Google Sheets API。我正在使用他们的 googleapis 包。我知道下面有一个 OAuth 运行，我按照本教程进行操作：morioh.com/p/1313d7785668。在节点控制台中工作后，我刚刚在组件中导入。我要说的是，如果打开一个节点外壳并需要 readCopaPinheiros 函数，它可以正常工作。我不知道是否隐藏了一些更深层次的东西。
还有一堆我无法破译的 webpack 错误。当 created 和 method 字段被删除时，它们不会出现。这是主要消息“Uncaught TypeError: Expected input to be a Function or Object, got undefined”
你能显示'@/sheets/fetchData.js'或readCopaPinheiros的代码吗？很可能你的承诺没有解决，因为控制台没有像你说的那样显示任何东西。
我已将代码添加到问题中。

标签： javascript vue.js

【解决方案1】：

v-for="athlete in athletes"

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

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

【讨论】：

我认为情况并非如此。我刚刚测试了你的建议，但没有奏效。我认为 fetchData 脚本存在一些问题， fetchCopaPinheiros 返回一个列表并且渲染应该可以工作。实际上，使用占位符值它可以工作，但是当尝试从 googlesheets API 获取数据时它停止工作。