Render an image before loading the component in vue js

Question

I have a Vue application in which i display list of events and every event individually, when i visit the page of the selected link i get an error in my console says GET http://localhost:1337/undefined 404 (Not Found) then the image loads

i used this method to set the id of the event to the component

  export default {
    data: function() {
      return {
        id: this.$route.params.id,
        e: {},
        users: []
      }
    },
    methods: {
      issueTicket: function(id, user) {

      }
    },
    created(){
      this.$http.get('http://localhost:1337/api/v1/event/find', { params : { id : this.id } }).then(result => {
        this.e = result.body.result[0];
      })
    }
  }

is there a way to get rid of this error ? i'm kind of new to Vue JS

Frnak · Accepted Answer · 2018-07-26 06:48:40Z

2

You should add your frontend code, in order to make clear where the error occurs.

A first wild guess: You try to access an image like

<img :src="e.img">

However, your e has no .img property until it's loaded. So you might want to consider to set

e: null

Initially and add a v-if for your page

<div class="this is your page div" v-if="e"> 
  <img :src="e.img">
  ...

This will ensure that you are not accessing undefined properties of e

In addition you should consider not mixing code styles

created() { .. }

vs

created: function() { ... }

answered Jul 26, 2018 at 6:48

Frnak

6,8626 gold badges38 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

Render an image before loading the component in vue js

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