Вычисление / асинхронная выборка данных

1

Я пытаюсь создать простые приложения Vue + CouchDB. С Vanilla JS это работает отлично, но я не получаю данные, полученные из базы данных с обещанием или функцией async для моего экземпляра vue. Вот мой код:

app.html

<div id="vue-app">
  <table>
    <thead>
      <tr>
        <th>{{ tableHead.name }}</th>
        <th>{{ tableHead.lastname }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="data in tableData">
        <td>{{ data.name }}</td>
        <td>{{ data.lastname }}</td>
      </tr>
    </tbody>
  </table>
</div>

app.js

const db = new PouchDB('testdb')

const couch = {
  fetchData: async function () {
    var dbData = await db.allDocs({
        include_docs: true,
        descending: true
    }).then(function (result) {
        var objects = {}
        result.rows.forEach(function (data) {
            objects[data.id] = data.doc
        })
        return objects
    }).catch(function(err) {        
        return err
    })
    return dbData
  }
}

var app = new Vue({
    el: '#vue-app',
    data: {
        tableHead: {
            name: 'Name',
            lastname: 'Lastname'
        }
    },
    computed: {
        async tableData () {
            var dbData = await fetchData()
            return dbData
        }
    }
})

Надеюсь, вы сможете научить меня правильному способу получения моих данных в экземпляр Vue!

Теги:
vue.js
couchdb
pouchdb

1 ответ

0

Добро пожаловать в SO!

Вычислимые свойства не должны быть асинхронными.

Обычный шаблон для асинхронного поиска данных:

  1. Использовать внутренний заполнитель data
  2. Инициировать асинхронный запрос на крючок жизненного цикла компонента, created или mounted
  3. При успешном выполнении запроса обновите внутренние data новым контентом.
  4. Используйте внутренние data в своем шаблоне.

В вашем случае вы должны:

  1. Превратите tableData в внутренние data, например, tableHead
  2. Вызовите функцию couch.fetchData в created hook.
  3. В функции, возвращаемой Promise, then цепочка (или после ожидания), назначьте свой tableData результатом
  4. Используйте tableData в своем шаблоне (ничего не менять)

См. Например, кулинарная книга Vue для использования API с Axios

Ещё вопросы

Сообщество Overcoder
Наверх
Меню