2.循环双层数据
外层
发送请求获取数据
定义一个变量并接收所得数据
在HTML中
v-for='(item,index) in newList(所定变量)’:key=‘index’(:key可以解决v-for红色波浪线问题)
动态生成数据渲染{{item.name}}
内层详情页
可以在外层写个点击事件@click=“xtggDetail(info)”
里面传参 可以直接显示渲染页面{{info.name}}
<div v-for="item in Lists " :key="item">
<li v-for="(item,index) in item.list " :key="index">
<span>{{item.name}}</span>
</li>
</div>
报错: Duplicate keys detected ‘1’. This may cause an update error.
原因:v-for 循环中绑定的 key 值重复了
1.一个循环且key绑定的 变量值不唯一
2.两个循环 同一个数组 造成的 key 值重复
解决方法:
- 可以把key值改为索引 (index)
- 改变key绑定的索引(index)值