在将组件加载到Vue JS中之前渲染图像

Question

我有一个Vue应用程序，在其中我分别显示事件列表和每个事件，当我访问所选链接的页面时，我的控制台出现错误，提示GET http://localhost:1337/undefined 404 (Not Found)然后图像加载

我使用此方法将事件的ID设置为组件

  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];
      })
    }
  }

有办法摆脱这个错误吗？ 我是Vue JS的新手

Answer 1

您应该添加前端代码，以弄清楚错误发生的位置。

第一个疯狂的猜测：您尝试访问类似

<img :src="e.img">

但是，您的e在加载之前没有.img属性。 因此，您可能需要考虑设置

e: null

首先，为您的页面添加一个v-if

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

这将确保您不会访问e的未定义属性

另外，您应该考虑不要混合使用代码样式

created() { .. }

与

created: function() { ... }