鍍金池/ 問(wèn)答/HTML5  HTML/ vue 子組件里面data 有多個(gè)數(shù)組的話不能同時(shí)循環(huán)遍歷嗎

vue 子組件里面data 有多個(gè)數(shù)組的話不能同時(shí)循環(huán)遍歷嗎

<template>

  <div class="flexslider">
    <ul class="slides">
        <li v-for="(item, index) in pic"><img :src="item.src" /></li>
    </ul>
  </div>
  <div class="NewProducts">
        <div class="headline">新品推薦</div>
            <div class="clearfix">
            <template v-for="(items, index) in pro">
                <div class="content">
                    <img :src="items.src">
                    <p class="title">{{items.title}}</p>
                    <p class="info">{{items.info}}</p>
                    <p class="details"><a href="javascript:;">{{items.details}}</a></p>
                    <div class="icon">{{items.icon}}</div>
                </div>
            </template>
        </div>
  </div>

</template>
<script>
$(function(){
$(".flexslider").flexslider({

   slideshowSpeed: 4000, //展示時(shí)間間隔ms
   animationSpeed: 400, //滾動(dòng)時(shí)間ms
   animation: 'fade',
   animationLoop: true, //是否循環(huán)
   controlNav: false,

});
})
export default {
data(){

  return {
      pic:[{
          src:require('../assets/images/img1.jpg')
       },
         {
             src:require('../assets/images/img2.jpg')
         },
         {
             src:require('../assets/images/img3.jpg')
         },
         {
             src:require('../assets/images/img4.jpg')
         }],
        pro:[{
              src: require('../assets/images/a1.png'),
              title:'小宅VR一體機(jī)',
              info:'視與聽的極限沉浸',
              details:'查看詳情',
              icon:'New'
        },{
              src: require('../assets/images/a1.png'),
              title:'小宅S2',
              info:'網(wǎng)絡(luò)直播神奇VR雙目攝像頭',
              details:'查看詳情',
              icon:'New'
        },{
              src: require('../assets/images/a1.png'),
              title:'小宅Z4收藏版',
              info:'有形有型 彰顯氣質(zhì)',
              details:'查看詳情',
              icon:'New'
        },
        {
              src: require('../assets/images/a1.png'),
              title:'小宅Z4',
              info:'視覺(jué)+聽覺(jué)一體全沉浸式VR頭盔',
              details:'查看詳情',
              icon:'New'
        }]
  }

}
}
</script>
<style scoped>
</style>

回答
編輯回答
久礙你

Component template should contain exactly one root element.
樓上已經(jīng)說(shuō)了 只能有一個(gè)根元素

2017年11月1日 02:42
編輯回答
魚梓

多個(gè)數(shù)組遍歷是可以的,沒(méi)有限制。
報(bào)錯(cuò)信息是什么?
你的模版有問(wèn)題,<template>里只能有一個(gè)根元素,所以你應(yīng)該再嵌套一個(gè)<div>

2018年8月27日 08:06
編輯回答
風(fēng)畔

謝邀??!
樓上已經(jīng)說(shuō)明了問(wèn)題所在,奈何還未解決,直接復(fù)制替換你上面的那些內(nèi)容便可看到效果!

<template>
  <div class="flexslider">
    <ul class="slides">
        <li v-for="(item, index) in pic"><img :src="item.src" /></li>
    </ul>
  </div>
  <div class="NewProducts">
        <div class="headline">新品推薦</div>
            <div class="clearfix">
            <div v-for="(items, index) in pro">
                <div class="content">
                    <img :src="items.src">
                    <p class="title">{{items.title}}</p>
                    <p class="info">{{items.info}}</p>
                    <p class="details"><a href="javascript:;">{{items.details}}</a></p>
                    <div class="icon">{{items.icon}}</div>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
$(function(){
$(".flexslider").flexslider({

   slideshowSpeed: 4000, //展示時(shí)間間隔ms
   animationSpeed: 400, //滾動(dòng)時(shí)間ms
   animation: 'fade',
   animationLoop: true, //是否循環(huán)
   controlNav: false,
});
})
export default {
data(){

  return {
      pic:[{
          src:require('../assets/images/img1.jpg')
       },
         {
             src:require('../assets/images/img2.jpg')
         },
         {
             src:require('../assets/images/img3.jpg')
         },
         {
             src:require('../assets/images/img4.jpg')
         }],
        pro:[{
              src: require('../assets/images/a1.png'),
              title:'小宅VR一體機(jī)',
              info:'視與聽的極限沉浸',
              details:'查看詳情',
              icon:'New'
        },{
              src: require('../assets/images/a1.png'),
              title:'小宅S2',
              info:'網(wǎng)絡(luò)直播神奇VR雙目攝像頭',
              details:'查看詳情',
              icon:'New'
        },{
              src: require('../assets/images/a1.png'),
              title:'小宅Z4收藏版',
              info:'有形有型 彰顯氣質(zhì)',
              details:'查看詳情',
              icon:'New'
        },
        {
              src: require('../assets/images/a1.png'),
              title:'小宅Z4',
              info:'視覺(jué)+聽覺(jué)一體全沉浸式VR頭盔',
              details:'查看詳情',
              icon:'New'
        }]
  }
}
}
</script>
<style scoped>
</style>
2017年4月17日 15:02