渲染期间访问但未在VUE中定义的属性

esyap4oy  于 2023-02-19  发布在  Vue.js
关注(0)|答案(1)|浏览(116)

加载页面时收到错误

我的代码如下所示**:**

<script>
    methods: {
      getPicture() {
        var base = this;         
      axios
          .get("http://localhost:3000/pictures/" + this.username)
          .then(function (response) {
           const { pictureData } = response.data;
           base.studentImage = "data:image/jpg; base64," + pictureData;

           console.log(base.studentImage);
       });
     },
     }, //END OF METHOD
 </script>

我想在我的前端显示图像。我哪里出错了?先谢谢你。

rekjcdws

rekjcdws1#

欢迎使用堆栈溢出!

  • 遗憾的是,我无法对此发表更明确的评论,所以我的回应必须是一个答案。*

发生此错误的原因是DOM和/或Vue示例和/或模板在“studentImage”可用或定义错误之前使用了该值。
我建议删除变量“base”,因为Vue对“this”的使用非常挑剔,所以你通常不想显式地将“this”赋给变量。正如下面Estus Flask所评论的,这甚至适用于常见的JS。检查here以获得更多关于在JS中引用正确的“this”的信息。
老实说,从我所看到的您所共享的代码来看,这很可能就是您的错误的原因。您需要在数据对象中定义“studentImage”,以便Vue知道它的存在。

以下是一个示例:

data: () => ({
  studentImage: '',
}),
methods: {
      getPicture() {        
      axios
          .get("http://localhost:3000/pictures/" + this.username)
          .then(function (response) {
           const { pictureData } = response.data;
           this.studentImage = "data:image/jpg; base64," + pictureData;

           console.log(this.studentImage);
       });
     },
  },

如果不是,那么在适当的生命周期中,在示例中使用“studentImage”和/或调用方法“getPicture”之前,您需要确保检查“studentImage”。
我在回答这个问题时假设您使用的是Vue的最新版本,即第三版。
如果这有帮助,请让我知道!

相关问题