vue使用component遇到的問題

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

-我是先謝了一個模板,內容如下:

<script type="text/html" id="zlbId-list-item">
    <div class="zlb_list_img">
        <img src="images/zlb_profile_photo1.png" alt=""/>
    </div>
    <div class="zlb_list_title">
        <p class="zlb_list_title_level"></p>
        <p class="zlb_list_title_date"></p>
    </div>
    <div class="zlb_list_detail"></div>
</script>

組件的寫法:

Vue.component('list-item', {
    props: ['level', 'date', 'price'],
    template: $('#zlbId-list-item').html()
})

最後渲染的時候報錯:

<ul class="zlb_list" id="zlbId-list">
    <list-item v-for="items in list" class="zlb_list_item" :key="items.id"></list-item>
</ul>

從網上查看資料,說的是組件模板只能有一個根元素:

模板改成:

<script type="text/html" id="zlbId-list-item">
    <div class="zlb_list_detail">123456</div>
</script>

就渲染成功