时间戳

首页 > 解决方案 > 遍历 VUE v-for 循环时出现对象错误

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

问题描述

对不起，我在这里缺乏知识。仍然掌握 Vue 的窍门。当我的长度是硬编码值时，我试图遍历一个循环并继续遇到问题。我不断得到：

'"[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>

标签： javascriptvue.jsv-for

解决方案

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

推荐阅读