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

我有一个组件，在里面，我有一个显示个人资料图像的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}`
    }

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

最佳答案

检查计算属性中是否存在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可用时，computed属性将立即“执行”。

关于javascript - 第一页加载Vue.js中无法访问数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51842023/