Vuejs template : "Cannot read properties of null" but Array is defined

Question

I want to display an array elements in my Vuejs template.

I am getting data from API, formatting them into an associative Array with a function and then trying to display in the template :

export default {
  components: {
    DefaultHeader,
    DefaultFooter
  },
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    this.refreshData();
  },
  methods: {
    refreshData() {
      infoService.getInfo(this.$route.params.id)
        .then(response => {
          this.info = FormatHelper.BInfoFormat(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
}

When i try to display the first element in the template with this code :

{{ this.info.name }}

I get the error :

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')

But when I display the full Array Object at the exact same place in code, I can see that it's defined :

{{ this.info }}

shows :

{ "name": "B3", "call": "about", "G": "H" }

Also, I get the right data when i try to console log in my mounted() component function :

console.log(this.info.name)

What is wrong in the way I am trying to access data getting me this error ?

is this.info initially null and gets populated later? try {{ this.info?.name }} - without atual code, or at least enough to know what this.info is, there's many reasons this will occur — Jaromanda X
– Jaromanda X, Commented Jan 6, 2024 at 6:07
When i try {{ this.info?.name }} the display is right, i get the name without any error, what is it doing ? And yes, this.info is first defined at null. — Jean-Loup
– Jean-Loup, Commented Jan 6, 2024 at 6:18
is first defined at null and null has no properties, therefore the error - either initially defined it as {} rather than null (though this may break other logic) or use v-if to conditionally show .name or use what I suggested - the actual reason would be easy to describe with some meaningful code in your question — Jaromanda X
– Jaromanda X, Commented Jan 6, 2024 at 6:22
I’m voting to close this question because the author answered without accepting — Alexander Nenashev
– Alexander Nenashev, Commented Jan 6, 2024 at 18:22

Jean-Loup · Accepted Answer · 2024-01-06 06:32:39Z

0

Problem solved, thanks to comments :

in :

export default {
  components: {
    DefaultHeader,
    DefaultFooter
  },
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    this.refreshData();
  },
  methods: {
    refreshData() {
      infoService.getInfo(this.$route.params.id)
        .then(response => {
          this.info = FormatHelper.BInfoFormat(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
}

replace :

  data() {
    return {
      info: null,
    };
  },

by :

  data() {
    return {
      info: {},
    };
  },

The initial define at null is breaking the Array methods I was trying to use in the template.

answered Jan 6, 2024 at 6:32

Jean-Loup

3983 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Nenashev Over a year ago

marked it solved, otherwise it draws attention of solvers

Jean-Loup Over a year ago

I cannot accept my own answer, it requires 22 more hours to wait

Collectives™ on Stack Overflow

Vuejs template : "Cannot read properties of null" but Array is defined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related