Используйте tableTop.js, чтобы вернуть массив, который можно использовать в Vue Components - PullRequest
Новая
       32

Используйте tableTop.js, чтобы вернуть массив, который можно использовать в Vue Components

0 голосов
/ 13 февраля 2019

Я пытаюсь создать массив объектов из электронной таблицы, используя tableTop.js, который можно передать в другие функции и компоненты vue.Мне не удалось вернуть все, что я могу на самом деле использовать. Я нашел этот пост , который приблизил меня к тому, что я имею после того, как он возвращается - массив массивов объектов с двумя неопределенными элементами массива, начинающимися с [ ob : Observer]

Если я выхожу из данных в функции getLibrary (), я вижу правильный массив, как мне нужно получить его в моем компоненте.

Если я не помещаю данные в массив gData в libraryData, я получаю неопределенное значение от функции.Я пытался обещания, нормальные функции и т. Д., Но ничего не работает.Я очень благодарен за любую помощь, которую кто-либо может оказать.

Изображение 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' импорт libraryData из './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>

Correct array being logged from library_data

Vue Component Log of Incorrect Array

1 Ответ

0 голосов
/ 13 февраля 2019

Здесь есть несколько проблем:

Вы используете 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" для его итерации.

Вот вам и кодекс

...