Question

我有一个组件，里面有一个用于显示个人资料图像的 img 我把它放在我的html中：

<img v-bind:src="this.profileSrc"/>

在我的计算属性中，我有 profileSrc 方法，如下所示：

profileSrc(){
      const that = this;
      console.log(that);
      return `${variables.BASE_URI}/file/thumbnail/${that.$store.getters[types.AUTH_GET_USER].picture.id}`
    }

在第二次页面加载时效果很好，但是第一次，它崩溃了： 无法读取null的属性“图片” ，这意味着它第一次无法识别此变量。但是当我更改页面并再次返回页面时它正在工作。为什么呢？谢谢：））

Answer 1

检查计算属性中是否存在picture：

profileSrc() {
  const that = this;
  if (that.$store.getters[types.AUTH_GET_USER].picture) {
    return `${variables.BASE_URI}/file/thumbnail/${
      that.$store.getters[types.AUTH_GET_USER].picture.id
    }`;
  }
}

一旦组件picture可用，计算出的属性就会“执行”。

Answer 2

您可以在v-if标记中添加img。在这种情况下，将在加载pictureSrc时显示图片。

<img v-if="profileSrc" v-bind:src="this.profileSrc"/>

我同意@Bennett Dams的回答。我刚刚添加了一些改进。您不需要that，可以将图片提取到变量中。

computed: {
  profileSrc() {
    const picture = this.$store.getters[types.AUTH_GET_USER].picture;

    if (picture) {
      return `${variables.BASE_URI}/file/thumbnail/picture`;
    }
  }
}

第一页加载Vue.js中无法访问数据

2 个答案: