[Vuejs]-VueJS rendering data from REST service

by

2👍

✅

I assume you are trying to display something from your store in your template. The problem is, Vue cannot render something that does not exist yet. The solution is to check whether the data exists or not.

Let’s take this component example:

<template>
    <div>
        {{ someObject.name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                someObject: null
            }
        },
        methods: {
            fetchTheObject () {
                this.someObject = {
                    id: 1,
                    name: 'My object'
                }
            }
        },
        created () {
            setTimeout( () => {
                this.fetchTheObject()
            }, 3000)
        }
    }
</script>

As you can see, you will get an error in your console because someObject.name does not exist until fetchTheObject() has been called.

The solution is to put some v-if attribute to control that:

<template>
    <div>
        <span v-if="someObject === null">Fetching the object</span>
        <span v-else>{{ someObject.name }}</span>
    </div>
</template>

In general, you would want to display some spinner to show the user that something is loading…

Hope this helps

EDIT: And forget about the async await in your code, you don’t need that here

👤Hammerbot

Leave a comment