javascript - Computedasync data fetching - Stack Overflow

admin管理员组

文章数量:1356413

I'm trying to create simple Vue + CouchDB apps. With Vanilla JS this works fine but I don't get the data fetched from the database with a promise or async function to my vue instance. Here is my code:

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'
        }
    },
    puted: {
        async tableData () {
            var dbData = await fetchData()
            return dbData
        }
    }
})

Hope you can teach me the right way to fetch my data to my Vue instance!

I'm trying to create simple Vue + CouchDB apps. With Vanilla JS this works fine but I don't get the data fetched from the database with a promise or async function to my vue instance. Here is my code:

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'
        }
    },
    puted: {
        async tableData () {
            var dbData = await fetchData()
            return dbData
        }
    }
})

Hope you can teach me the right way to fetch my data to my Vue instance!

• javascript
• json
• vue.js
• couchdb
• pouchdb

Share Improve this question Follow edited Jul 19, 2018 at 15:53 Jonathan Hall 79.9k1919 gold badges159159 silver badges203203 bronze badges asked Jul 16, 2018 at 11:58 pazzeropazzero 3111 gold badge11 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Wele to SO!

Computed properties are not meant to be async.

The usual pattern to address async retrieval of data is to:

1. Use an internal data placeholder
2. Initiate the async request on ponent lifecycle hook created or mounted
3. On request success, update the internal data with the new content.
4. Use the internal data in your template.

In your case, you would:

1. Turn your tableData into an internal data, like your tableHead
2. Call your couch.fetchData function in created hook.
3. In the function returned Promise then chain (or after awaiting), assign your tableData with the result
4. Use tableData in your template (nothing to change)

See for example the Vue cookbook to consume APIs with Axios

本文标签： javascriptComputedasync data fetchingStack Overflow