How to display async data in vue template

Question

I\'m interesting in the case of displaying in vue template data which loaded asynchroniously. In my particular situation I need to show title attribute of product object:

Answer 1

There are a few good methods of handling async data in Vue.

1. Call a method that fetches the data in the created lifecycle hook that assigns it to a data property. This means that your component has a method for fetching the data and a data property for storing it.

2. Dispatch a Vuex action that fetches the data. The component has a computed property that gets the data from Vuex. This means that the function for fetching the data is in Vuex and your component has a computed property for accessing it.

In this case, it looks like your component needs to have a RolledMetal and based on that it retrieves a product. To solve this you can add methods that fetch both of them, and call them on the created lifecycle. The second method should be called in a then-block after the first one to ensure it works as expected.

Answer 2

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>