关于vue.js中的条件渲染v-for

Question

vue.js v-for下面可以再接一个v-for吗？

<nav class="order-item-items" id="order-item-items">  <a href="#" class="text-center" v-for="item in items">
    <img :src="item.iconPath" alt=""><p>{{item.name}}</p>
  </a></nav>

导航栏里面的内容我渲染出来了，然后我想的是把nav渲染循环两次 我把代码改成这样

<div class="order-item-box" id="order-item-box">  <template v-for="item in itemBox">
    <nav class="order-item-items" id="order-item-items">
      <a href="#" class="text-center" v-for="item in items">
        <img :src="item.iconPath" alt=""><p>{{item.name}}</p>
      </a>
    </nav>
  </template></div>

然后控制台报错 [Vue warn]: Cannot find element: #order-item-items

是什么地方没写对呢？
js代码就写了nav下的渲染

js修改了一下

整个nav是有了两个，但是nav下面渲染的（代付款这些标题和图片）不在了

Answer 1

多层循环是可以的.这里不要用id id="order-item-items"循环出来的不就重复了吗