Error in rendering in VueJS and Laravel mix

Question

I am having an error when I load the page the first time.

I have the following code in that component.

<router-link
    :to="{
        name: 'play',
        params: { token: this.$route.params.token,
                  id: user.id }
        }"
    target="_blank"
    >
        <button class="btn btn-warning fz-btn-play">
             <i class="fas fa-play"></i>
        </button>
</router-link>

when page loads first-time user.id is giving error because when it loads user variable is null. error is TypeError: Cannot read property 'id' of null

then I run created() method:

created() {
   axios.get("/api/getUser").then((response) => {
       this.user = response.data;
   });
},

when page is fully loaded it is working fine but the error is showing in console how to remove this error.

Utsav Patel · Accepted Answer · 2020-04-05 13:46:22Z

1

Apply v-if on your router-link

<router-link
    v-if="user" //use user as v-if
    :to="{
        name: 'play',
        params: { token: this.$route.params.token,
                  id: user.id }
        }"
    target="_blank"
    >
        <button class="btn btn-warning fz-btn-play">
             <i class="fas fa-play"></i>
        </button>
</router-link>

This will prevent the error you are facing.

answered Apr 5, 2020 at 13:46

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Error in rendering in VueJS and Laravel mix

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related