vue.js - 如何使用 VueBlobJsonCsv 从 API 提取数据并转换为 CSV

Question

您知道如何使用 VueBlobJsonCsv 从 API 提取的 JSON 数据存储为 CSV 吗？当数据属性在组件的已安装步骤上初始化时它正在工作，但这可能是早期的并且在页面加载时对 API 提出冗余请求。所以我想在每个点击请求 API 上并将其传递给“数据”属性。

组件看起来像这样

<template>
  <div id="app">
    <vue-blob-json-csv
      tag-name="div"
      file-type="csv"
      file-name="sample"
      :data="datafromapi"
    >
      <h2>DOWNLOAD</h2>
    </vue-blob-json-csv>
  </div>
</template>
<script>
import Vue from "vue";
import VueBlobJsonCsv from "vue-blob-json-csv";

Vue.use(VueBlobJsonCsv);

export default {
  name: "App",
  data() {
    return {
      datafromapi: [],
    };
  },
  async mounted() {
    //this works but this request is too early
    await this.requestAPI();
  },
  methods: {
    requestAPI: async function() {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1"
      );
      const json = await response.json();
      this.datafromapi.push(json);
    },
  },
};
</script>

标签： vue.jsvue-component