在 vue js 中加载组件之前渲染图像

【问题标题】：Render an image before loading the component in vue js在 vue js 中加载组件之前渲染图像
【发布时间】：2019-01-03 01:27:32
【问题描述】：

我有一个 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 的新手

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案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() { ... }

【讨论】：