使用 tableTop.js 到 return 一个可以在 Vue Components 中使用的数组

Question

我正在尝试使用 tableTop.js 从电子表格构建一个对象数组，这些对象可以传递到其他函数和 vue 组件中。我没有成功归还任何我可以实际使用的东西。这让我接近了我所追求的，但是它返回的是一个对象数组，其中有两个以 [ob: Observer][= 开头的未定义数组项18=]

如果我在 getLibrary() 函数中注销数据，我可以看到正确的数组，我需要如何在我的组件中接收它。

如果我不将数据推送到 libraryData 中的 gData 数组中，我会在 vue 中从函数中收到 undefined。我尝试过承诺、正常功能等，但似乎没有任何效果。非常感谢任何人可以提供的帮助。

图 1 是我在 vue 中尝试接收的库数据中注销的内容。

图 2 是我在 vue 中得到的

libraryData.js

// let gData = []

export default async function () {
  let spreadSheet = 'url'
  Tabletop.init({
    key: spreadSheet,
    callback: (data, tabletop) => { return getLibraryData(data,m tabletop) },
    simpleSheet: true
  })
}


export function getLibraryData(data, tabletop) {
   // gData.push(data);
   ///gData = data
   log(data)
   // I just want to return the data here to be used in vue
   return data;
}

index.js 从 'vue' 导入 Vue 从 './partials/libraryData.js'

导入库数据

// Too be added into a vue-lodaer?
new Vue({
  el: '#vhsLibrary',
  router,
  template: '<vhsLibrary/>',
})

window.addEventListener('DOMContentLoaded', () => {
  libraryData()
})

vue_component.vue

<script>
    import { getLibraryData } from '../../js/partials/library_data';

export default {
    data: () => {
        return {
          gData: null
        }
    },
    mounted () {
        this.gData = getLibraryData()
        log('Get Library', getLibraryData())
    }
}
</script>

Answer 1

这里有几个问题：

您使用 async，但您从不使用 await。在您的情况下，我们想要 await Promise 的 resolution or rejection：

export default async function () {
  return await new Promise((resolve, reject) => {
    const spreadSheet = 'url'
    Tabletop.init({
      key: spreadSheet,
      callback: (data, tabletop) => { resolve({data, tabletop}) },
      simpleSheet: true
    })
  })
}

没有理由要附加功能，因为它没有收益。现在让我们看看 Vue。

首先，您的 gData 变量被初始化为 null 而不是 []。让我们改变一下：

data () {
  return {
    gData: []
  }
},

接下来，让我们更新我们的 mounted 方法。我们可以在这里使用相同的 async/await 模式：

async mounted () {
  const { data } = await getLibraryData()
  this.gData = data
}

现在您可以v-for="(row, index) in gData"对其进行迭代。

Here's a codepen for you, too

使用 tableTop.js 到 return 一个可以在 Vue Components 中使用的数组

Use tableTop.js to return an array that can be used in Vue Components

vue.js

tabletop.js