使用 axios 和 Vue.js 以 JSON 格式获取电子表格数据

Question

我正在尝试以 JSON 格式从谷歌工作表中获取行/数据。

<script>
const url =
  "https://spreadsheets.google.com/feeds/list/1NXF6G5npwcGeo2v_9tSDzieSHjxe4QtA-I9iPzHyvMk/1/public/values?alt=json";
const axios = require("axios").default;
export default {
  data: () => ({
    entries: [],
  }),
  mounted() {
    axios.get(url).then((response) => {
      this.entries = response.data;
    });
  },
};
</script>

JSON 树（？）不确定它叫什么。我对此真的很陌生。看起来像

如何在我的 vue 应用上调用它

<v-simple-table class="mt-5">
  <tbody>
    <tr v-for="column in entries" :key="column.EmployeeID">
      <td>{{ column.EmployeeID }}</td>
      <td>{{ column.EmployeeName }}</td>
      <td>{{ column.RaffleTickets }}</td>
      <td>{{ column.TotalPromoter }}</td>
      <td>{{ column.TotalAHTGoal }}</td>
    </tr>
  </tbody>
</v-simple-table>

不确定我与想要的结果有多接近。

Answer 1

根据你应该做的响应数据结构：

 this.entries = response.data.feed.entry;

然后在模板中：

  <tr v-for="column in entries" :key="column.gsx$employeeid.$t">
      <td>{{ column.gsx$employeeid.$t}}</td>
      <td>{{ column.gsx$employeename.$t}}</td>
      <td>{{ column.gsx$raffletickets.$t}}</td>
      <td>{{ column.gsx$totalpromoter.$t }}</td>
      <td>{{ column.gsx$totalahtgoal.$t }}</td>
    </tr>