Vue template won't render if array in data function is empty

Question

I'm having a problem with a Vue template where no elements on the page will not render unless an array declared on data is already populated.

The problem is that the data is only populated after an API call made by submitting a form.

The browser console reads Error in render: "TypeError: Cannot read property 'response' of undefined"

If I comment out the {{classes.data.response}} the form displays but will not otherwise.

Here is what the code looks like.

<template>
  <div class="container"> 
        <form @submit="getClass">
          <input type="text" placeholder="Search..." v-model="class_id">
          <button type="submit">Search</button>
        </form>
        <br>
        <div v-if="classes"> <!-- conditionally render if array has results -->
         {{classes.data.response}} <!-- form shows when this is commented out -->
        </div>
  </div>
</template>

The data block

 data() {
    return {
      classes: []
    };
  },
...

And the methods block

methods: {

...
     // Request
      axios(config)
        .then(response => (this.classes = response))
   
        .catch(function (error) {
          console.log('There was an error :' , error);
        });
      }
}

I'm relatively new to Vue so if anyone can tell me what is going wrong here I'd much appreciate it. Thanks in advance!

Hey @mikeym please take a look at my answer and let me know if it helped you or if there is still anything unclear — turbopasi
– turbopasi, Commented Nov 23, 2020 at 6:35

turbopasi · Accepted Answer · 2020-11-23 06:34:44Z

this.classes.data.response is not defined

You can try to be more specific when assigning the response to classes. Instead of this.classes = response, do this this.classes = response.data.response. response.data.response is the Array you are looking for, not response.

methods: {

...
   // Request
      axios(config)
        .then(response => (this.classes = response.data.response))
   
        .catch(function (error) {
          console.log('There was an error :' , error);
        });
      }
}

Then in the template just write {{ classes }} instead of {{ classes.data.response }}, also v-if="classes.length > 0" instead of just v-if="classes".

v-if="classes" will always be true

v-if="classes.length > 0" will be true when the Array has more the 0 elements in it

Why

Because of the asynchronous nature of the API request, the moment the form tries to render this.classes will still be the empty Array you defined. Only later, once the API request has finished, this.classes will have the data it needs.

Ohgodwhy · Accepted Answer · 2020-11-23 06:17:12Z

0

empty arrays are truthy, so v-if="classes" will always be true. use classes.length, as an empty array will result in 0 which is falsy.

answered Nov 23, 2020 at 6:17

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Comments

lester-barahona · Accepted Answer · 2020-11-23 06:23:11Z

0

maybe yo can do something like

    <div v-if="classes.length>0">
     {{classes.data.response}} 
    </div>

answered Nov 23, 2020 at 6:23

lester-barahona

464 bronze badges

Collectives™ on Stack Overflow

Vue template won't render if array in data function is empty

3 Answers 3

this.classes.data.response is not defined

Why

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

this.classes.data.response is not defined

Why

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related