Javascript 计算/异步数据获取

我正在尝试创建简单的Vue+CouchDB应用程序。对于Vanilla JS，这很好，但是我没有使用promise或异步函数将从数据库中获取的数据获取到我的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>

希望您能教我如何将数据提取到Vue实例中

欢迎来到SO

计算属性并不意味着是异步的

解决数据异步检索的通常模式是：

使用内部

数据
占位符

在组件生命周期钩子

已创建

或

已装载

请求成功后，使用新内容更新内部

数据

使用模板中的内部

数据

在您的情况下，您将：

将您的

表格数据

转换为内部

数据

，就像您的

表格头

调用

created

hook中的

coach.fetchData

函数

在返回的函数Promise

then

chain（或等待后）中，将结果分配给您的

tableData

在模板中使用

tableData

（无需更改）

例如，请参见Vue

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
        }
    }
})