[Vuejs]-Property accessed during render but not defined in VUE

by

0👍

Welcome to Stack Overflow!

Sadly, I can’t comment on this for more clarity, so my response has to be an answer.

This error occurs because the DOM and/or Vue Instance and/or Template uses the value "studentImage" before it is made available or defined incorrectly.

I recommend removing the variable "base" because Vue is very picky with its use of "this," so you usually wanna stay away from explicitly assigning "this" to a variable. As commented by Estus Flask below, this even applies to common JS. Check here for more information on referring to the correct "this" in JS.

Honestly, from what I can see with the code you’ve shared, that’s likely the cause of your error. You’ll want to define "studentImage" within your data object so Vue is aware of its existence.

Here is an example:

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

If it is not, then you’ll want to make sure you’re checking for "studentImage" before using it within the instance and or calling the method "getPicture," in the appropriate lifecycle.

I’m answering this assuming you’re using the latest version of Vue, version three.

If this helps, please let me know!

Leave a comment