Object error when iterating through VUE v-for loop

Question

Pardon, my lack of knowledge here. Still getting the hang of Vue. I am trying to iterate through a loop and keep running into an issue when my length is a hardcoded value. I keep getting:

'"[Vue warn]: Error in render: 'TypeError: Cannot read property 'title' of undefined'

Js:

new Vue({
  el: '#app',
  data: {
    inputs: [],
    items: [
    { title: 'Blue' },
    { title: 'Yellow' },
    { title: 'Red' },
    { title: 'Purple' }
  ]
  }
})

Markup:

<div id="app">
 <ul>
  <li v-for="n in 4">
    <label>
      <input
        type="checkbox"
        v-model="inputs"
        :value="n"
        :disabled="inputs.length > 0 && inputs.indexOf(n) === -1" 
        > Item {{ items[n].title }}
    </label>
  </li>
</ul>
</div>

Jayce444 · Accepted Answer · 2021-04-09 01:02:22Z

1

v-for="n in 4" will mean that n is 1,2,3,4 - rather than 0,1,2,3. So it won't match with the indices of the array. You need to use the index of the loop counter, which is the second argument, i.e.

<li v-for="(n, i) in 4">

and then

{{ items[i].title }}

answered Apr 9, 2021 at 1:02

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

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

1 Comment

Styx Over a year ago

Or just v-for="({ title }, n) in items" and then use title and n.

tony19 · Accepted Answer · 2022-07-15 02:47:54Z

0

You made an incorrect loop... I don't know if the logics you made are correct, but this is how a vue js loop should be:

<li v-for="item in items">
    <label>
      <input :value="item"> 
      Item {{ item.title }}
    </label>
</li>

After this, perhaps your console will show an error saying that li tag misses a key, then, see the docs https://v2.vuejs.org/v2/guide/list.html :)

edited Jul 15, 2022 at 2:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 9, 2021 at 1:08

Cristian Silva

1

Collectives™ on Stack Overflow

Object error when iterating through VUE v-for loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related