Cannot read property of 'Undefined' in vue.js

Question

This is my vue instance:

var vue = new Vue({
  el: '#vue-wrapper',
  data: {
    items: [],
}})

This is a v-for loop in my index.html.eex

<div v-for="item in items[0].subItems">{{item.name}}</div>

This is the script where I populate items, on document ready, with data passed during rendering from my Phoenix server.

<script type="text/javascript">
      jQuery(document).ready(function() {
      //Assign server-side parameters
      vue.items = <%= raw(@items) %>;
      console.log(vue.items);
    });
</script>

The log function shows the proper list of items that i want. Problem is that I can't access them in the v-for loop, I'm getting:

vue.min.js:6 TypeError: Cannot read property 'subItems' of undefined

I can't access the first element, like items are still not populated. How can I achieve this? I'm forced to initialize it in the index.html.eex file because I need the eex syntax to retrieve data passed from the server.

It's likely your Vue is created before the data is available, which results in the undefined. — Bert
– Bert, Commented Feb 16, 2018 at 14:38
Why are you loading your data via jQuery, instead of inside Vue (such as inside a mounted() hook)? — Daniel Beck
– Daniel Beck, Commented Feb 16, 2018 at 15:15

Thomas · Accepted Answer · 2018-02-16 10:22:02Z

10

var vue = new Vue({
  el: '#vue-wrapper',
  data: {
    items: [{ subitems: []}],
})

Subitems was not defined in your example. This should fix it.

answered Feb 16, 2018 at 10:22

Thomas

2,5461 gold badge19 silver badges23 bronze badges

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

2 Comments

Razinar Over a year ago

No. this is just an example of the scenario. Problem is that i can't access items[0] because it's undefined

Thomas Over a year ago

Thats because you defined an empty array as items und and empty array is undefined on position 0.

Asan Abildin · Accepted Answer · 2018-02-16 11:58:02Z

0

try to wrap your v-for into v-if="flag"
define your flag in instance as false
once your data comes from backend change the flag...

answered Feb 16, 2018 at 11:58

Asan Abildin

1113 bronze badges

Comments

Amin Fazlali · Accepted Answer · 2018-02-16 15:01:07Z

0

Try this:

<div v-if="items.length > 0" v-for="item in items[0].subItems">{{item.name}}</div>

answered Feb 16, 2018 at 15:01

Amin Fazlali

1,2371 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Cannot read property of 'Undefined' in vue.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related