VueJS rendering data from REST service

Question

I've attempted to render data from a http request to a component which is working fine, the issue is that it's null while the data is being fetched. While the data is null the console is throwing a TypeError until all the data is loaded and committed to the Vuex store.

All is working how I'd suspect, I'm just trying to figure how I can prevent the errors being thrown and to wait until all the appropriate data is fetched. I've seen others using v-if to check if the data is null which will work. It just seems tedious and that there surly is a better way to achieve the same outcome, without an application riddled with v-if statements checking every single state.

I came across this solution but it's still not working how I thought it would, I'm still receiving the same console errors. Am I using these key words correctly and are they in the correct location? since nothing has changed with every variation I've tried.

Vuex Action:

const actions = {
  getThread ({ commit }, payload) {
    Vue.http
      .get(`http://localhost:9000/threads/${payload.id}`)
      .then(async response => {
        commit(FETCH_THREAD, await response.data)
      })
  }
}

This is within my vue file calling upon the action:

created () {
    this.$store.dispatch('getThread', {id: '59280ab5acbafb17af9da902'})
  }

Look at this ( router.vuejs.org/en/advanced/data-fetching.html ). — Vamsi Krishna
– Vamsi Krishna, Commented May 28, 2017 at 11:45
@VAMSIKRISHNA I did look into this too but it was producing the same errors in the console. — Jordan
– Jordan, Commented May 28, 2017 at 12:07
Why is it async-await? When get is resolved in .then you've already received the data. Besides, mutations can only be synchronous, so this async-await commit doesn't make sense if I'm not missing something. — Egor Stambakio
– Egor Stambakio, Commented May 28, 2017 at 12:10
@wostex Thats where I'm confused, I was just following along with this post stackoverflow.com/questions/41609155/… where the same issue arised. — Jordan
– Jordan, Commented May 28, 2017 at 12:20
There async-await is used on actions, not mutations. It's a different case there. In order to avoid render errors while your data is not fetched, just use guards in you templates: v-if="mydata && mydata.length" for an array for example. — Egor Stambakio
– Egor Stambakio, Commented May 28, 2017 at 12:30

Hammerbot · Accepted Answer · 2017-05-28 12:40:19Z

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

answered May 28, 2017 at 12:40

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

VMAtm Over a year ago

And what would one do if there is data after 3000?

Hammerbot Over a year ago

I don't understand

VMAtm Over a year ago

You set the timeout for 3000 to wait the data. What if in real world scenario there wouldn't be the data after 3000?

Hammerbot Over a year ago

In the real world, you are supposed to make an ajax request, that is supposed to either succeed or fail. You should then adapt this model to a success/failure scenario. For example, adding a "fetching_error" variable and displaying some message if this fetching_error is set to something

Collectives™ on Stack Overflow

VueJS rendering data from REST service

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related