我正在尝试创建简单的 Vue + CouchDB 应用程序。使用 Vanilla JS 这工作正常,但我没有从数据库中获取数据,并使用 promise 或 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!
计算属性并不意味着异步。
解决数据异步检索的常用模式是:
- 使用内部
数据
占位符 - 在组件生命周期 Hook
created
或mounted
上发起异步请求 - 请求成功后,使用新内容更新内部
数据
。 - 在模板中使用内部
数据
。
在你的情况下,你会:
- 将您的
tableData
转换为内部data
,例如您的tableHead
- 在
created
Hook 中调用您的couch.fetchData
函数。 - 在函数返回的 Promise
then
链(或等待之后)中,将结果分配给您的tableData
- 在模板中使用
tableData
(无需更改)
例如,参见 Vue cookbook to consume APIs with Axios
关于javascript - 计算/异步数据获取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51361325/