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

问题描述

问 题

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下的渲染

var vm= new Vue({
    el:'#order-item-items',
    data:{
        items:[{
            name:'代付款',
            iconPath:'img/wallet.png'
        },{
            name:'待发货',
            iconPath:'img/push.png'
        },{
            name:'代收货',
            iconPath:'img/get.png'
        },{
            name:'待评价',
            iconPath:'img/chat.png'
        },{
            name:'退货/款',
            iconPath:'img/pay.png'
        }]
    }
})

js修改了一下

var vm = new Vue({
    el: '#order-item-box',
    data: {
        itemBox:[1,2]
    }
})
var vm = new Vue({
    el:'#order-item-items',
    data:{
        items:[{
            name:'代付款',
            iconPath:'img/wallet.png'
        },{
            name:'待发货',
            iconPath:'img/push.png'
        },{
            name:'代收货',
            iconPath:'img/get.png'
        },{
            name:'待评价',
            iconPath:'img/chat.png'
        },{
            name:'退货/款',
            iconPath:'img/pay.png'
        }]
    }
})

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

解决方案

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

这篇关于javascript - 关于vue.js中的条件渲染v-for的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！