Property accessed during render but not defined in VUE

Question

I receive an error when I load the page

My code looks like this :

 <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>

I want to display image in My front end. Where do I make a mistake ? Thank you in advance.

There should be a `data` item defined as `studentImage` in your script. Can you please share the full script part of your component? — Kiran Parajuli, Feb 17 '23 at 02:46
Please, provide https://stackoverflow.com/help/mcve for your problem, see https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors — Estus Flask, Feb 17 '23 at 04:19

Francesco Hayes · Answer 1 · 2023-02-17T17:54:20.800

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!

this result is this "MainLayout.vue?713b:311 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'studentImage')" — Quasar Dev, Feb 17 '23 at 03:23
"I recommend removing the variable "base" because Vue is very picky with its use of "this," - it's not about Vue, this is common JS thing, and it was solved the wrong way in the post. See https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — Estus Flask, Feb 17 '23 at 04:21
@QuasarDev – can you please share your entire template code? — Francesco Hayes, Feb 17 '23 at 17:55

Property accessed during render but not defined in VUE

1 Answers1