Question

我正在尝试使用tableTop.js从电子表格中构建对象数组，该对象可以传递到其他函数和vue组件中。我一直无法返回我可以实际使用的任何东西。 documentation使我接近所追求的目标，但是返回的却是一个对象数组，其中包含两个以[ ob ：Observer]

开头的未定义数组项

如果我在getLibrary（）函数中注销数据，则可以看到正确的数组，以及如何在组件中接收它们。

如果我不将数据压入libraryData的gData数组中，则该函数在vue中会收到未定义的信息。我尝试了诺言，正常功能等，但似乎没有任何效果。非常感谢任何人都可以提供的帮助。

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

图2是我所要表达的东西

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'导入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>

I found this post

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

Here's a codepen for you, too

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

1 个答案: