Vue.js - Get N element from array - Undefined

Question

I have some issues with my Vue.JS code. I need to get 5-th element of my array and it's work fine but Vue display also a couple of errors

To get my data I used this code:

<div>
  <span>{{ items[4].name }}</span>
</div>

It's work fine (Vue display data) but I have also this error in console:

[Vue warn]: Error in render: "TypeError: _vm.items[4] is undefined"

found in

---> <GeneralComponent> at resources/js/components/GeneralComponent.vue
       <General> at resources/js/views/General.vue
         <App> at resources/js/views/App.vue
           <Root>


TypeError: "_vm.items[4] is undefined"

did you checked your array length ? does it contains 5 element or less ? — Code Maniac
– Code Maniac, Commented Jun 2, 2019 at 16:50
Can you post more of the code you are using? What does the data object look like?... need some more code to help.. — Matt Oestreich
– Matt Oestreich, Commented Jun 2, 2019 at 16:50
are you loading the data via an api or something? You must ensure that items and items[4] is actually available before referencing name - e.g. <span v-if="items && items[4]">{{ items[4].name }}</span> — Frnak
– Frnak, Commented Jun 2, 2019 at 16:52

emcee22 · Accepted Answer · 2019-06-02 17:05:15Z

2

I think that your array is populated after it is accessed in your dom, so you can try it like this:

{{ items[4] && items[4].name }}

answered Jun 2, 2019 at 17:05

emcee22

1,8996 gold badges23 silver badges32 bronze badges

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

Comments

Aniefon Umanah · Accepted Answer · 2019-06-02 17:05:54Z

1

You are trying to get element before it rendered so I will say first check the length

<div v-if='items.lenght>0'>
   <span>{{ items[4].name }}</span>
</div>

answered Jun 2, 2019 at 17:05

Aniefon Umanah

1048 bronze badges

Collectives™ on Stack Overflow

Vue.js - Get N element from array - Undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related