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

Question

我试图使用tableTop.js从电子表格构建一个对象数组，这些对象可以传递到其他函数和vue组件中。我一直未能归还任何我可以实际使用的东西。我找到了这个职位使我接近我所追求的，然而它正在返回的是一个对象数组数组，其中包含两个未定义的数组项，以ob：开头。

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

如果不将数据推入gData数组中的libraryData中，就会从函数接收vue中未定义的数据。我曾经尝试过承诺，正常的功能等等，但似乎没有任何效果。非常感谢任何人能提供的任何帮助。

图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‘导入libraryData从’./partials/libraryData aryData.js‘导入vue

// 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承诺的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"来迭代它了。

这也是你的密码