遍历VUE v-for循环时出现对象错误

Question

对不起，我在这里缺乏知识。仍在掌握 Vue.js 的窍门。当我的长度是硬编码值时，我试图遍历一个循环并使运行成为一个问题。我不断收到：

'"[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' }
  ]
  }
})

标记：

<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>

Answer 1

v-for="n in 4" 将意味着 n 是 1,2,3,4 - 而不是 0,1,2,3。所以它不会与数组的索引匹配。您需要使用循环计数器的index，这是第二个参数，即

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

然后

{{ items[i].title }}

Answer 2

你做的循环不对...我不知道你做的逻辑是否正确，但是一个vue js循环应该是这样的：

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

在此之后，您的控制台可能会显示一个错误，指出 li 标签缺少一个键，然后，请参阅文档 https://vuejs.org/v2/guide/list.html :)

遍历VUE v-for循环时出现对象错误

Object error when iterating through VUE v-for loop

javascript

vue.js

v-for