How to display async data in vue template

by

I always use a loader or a spinner when data is loading!

<template>
  <table>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
      </tr>
    </thead>
    <tbody>

      <template v-if="loading">
        <spinner></spinner> <!-- here use a loaded you prefer -->
      </template>

      <template v-else>
        <tr v-for="row in rows">
          <td>{{ row.name }}</td>
          <td>{{ row.lastName }}</td>
        </tr>
      </template>

    </tbody>
  </table>
</template>

And the script:

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        loading: false,
        rows: []
      }
    },
    created() {
      this.getDataFromApi()
    },
    methods: {
      getDataFromApi() {
        this.loading = true
        axios.get('/youApiUrl')
        .then(response => {
          this.loading = false
          this.rows = response.data
        })
        .catch(error => {
          this.loading = false
          console.log(error)
        })
      }
    }
  }
</script>

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. How do I return the response from an Observable/http/async call in angular?
  3. Why is setState in reactjs Async instead of Sync?
  4. How to dynamically change header based on AngularJS partial view?
  5. How do I chain three asynchronous calls using jQuery promises?
  6. Execute write on doc: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
  7. How does Asynchronous Javascript Execution happen? and when not to use return statement?
  8. Node JS Promise.all and forEach
  9. How to write asynchronous functions for Node.js
  10. Vue.js 3 Event Bus
  11. [Vue warn]: Property or method is not defined on the instance but referenced during render
  12. node.js async/await using with MySQL
  13. Difference between the created and mounted events in Vue.js
  14. Access a variable outside the scope of a Handlebars.js each loop
  15. jQuery – Can threads/asynchronous be done?
  16. Use Async/Await with Axios in React.js
  17. Is there any way to ‘watch’ for localstorage in Vuejs?
  18. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  19. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  20. Javascript – if with asynchronous case
  21. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  22. Is there a way to pass variables into templates in Meteor?
  23. Force download GET request using axios
  24. Styling Vuetify selectors
  25. Using “await” inside non-async function
  26. How to limit iteration of elements in `v-for`
  27. Conflict on Template of Twig and Vue.js
  28. JavaScript asynchronous programming: promises vs generators
  29. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  30. How to bind img src to data in Vue

Leave a Comment