Я пытаюсь создать простые приложения 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!
Добро пожаловать в SO!
Вычислимые свойства не должны быть асинхронными.
Обычный шаблон для асинхронного поиска данных:
data
created
или mounted
data
новым контентом.data
в своем шаблоне.В вашем случае вы должны:
tableData
в внутренние data
, например, tableHead
couch.fetchData
в created
hook.then
цепочка (или после ожидания), назначьте свой tableData
результатомtableData
в своем шаблоне (ничего не менять)См. Например, кулинарная книга Vue для использования API с Axios