vue.js - 使用 tableTop.js 返回一个可以在 Vue 组件中使用的数组

Question

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

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

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

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

图 2 是我在 vue 中得到的

库数据.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' 导入 libraryData

// 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>

标签： vue.jstabletop.js

Answer 1

这里有几个问题：

你用过async，但你从不await。await在你的情况下，我们想要resolution or rejection一个 Promise：

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"对其进行迭代。

这也是一个给你的代码笔