Vue 搭配 template 標籤使渲染資料不額外產生標籤

使用 Vue 開發程式時,v-for 是一個經常使用的指令,用於一組陣列渲染。不過今天如果只是要進行迴圈渲染,不想額外產生新標籤,又該怎麼進行撰寫?

遇到的問題

前幾天利用 Bootstrap Carousel 元件,想使用 Vue 將資料渲染使用。但發現一個問題:

1
2
3
4
5
6
7
8
9
10
11
<div class="carousel-inner">
<div v-for="(url,num) in temp.imagesUrl">
<div v-if="num == 0" class="carousel-item active">
<img class="w-100" :src="url" :alt=`照片${num+1}`>
</div>
<div v-else class="carousel-item">
<img class="w-100" :src="url" :alt=`照片${num+1}`>
</div>
</div>
<!-- 其它 Buutton -->
</div>

這個範例我為了要跑 v-for 指令,所以特別再加上一層 <div> 標籤;但這樣會使渲染後的 HTML 語法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="carousel-inner">
<div>
<div class="carousel-item active">
<img class="w-100" src="照片網址1" alt="照片1">
</div>
</div>
<div>
<div class="carousel-item">
<img class="w-100" src="照片網址2" alt="照片2">
</div>
</div>
<!-- 其它 Buutton -->
</div>

從外觀上來看,或許只是多了一層 <div> 標籤,但是在 Carousel 的機制下,是無法正常運作的!這會使 Carousel 無法順利轉到下一張圖片,點擊上下張或是指定按鈕也無效。

解決方法:使用 <template> 標籤

使用 <template> 標籤搭配進行渲染,能夠使 DOM 結構產生時不會新增額外不必要標籤。

1
2
3
4
5
6
7
8
9
10
11
<div class="carousel-inner">
<template v-for="(url,num) in temp.imagesUrl">
<div v-if="num == 0" class="carousel-item active">
<img class="w-100" :src="url" :alt=`照片${num+1}`>
</div>
<div v-else class="carousel-item">
<img class="w-100" :src="url" :alt=`照片${num+1}`>
</div>
</template>
<!-- 其它 Buutton -->
</div>

將用於放置 v-for 的標籤改成 <template>,最後產生語法如下:

1
2
3
4
5
6
7
8
9
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="照片網址1" alt="照片1">
</div>
<div class="carousel-item">
<img class="w-100" src="照片網址2" alt="照片2">
</div>
<!-- 其它 Buutton -->
</div>

於是回到 Demo,Bootstrap Carousel 元件就能正常運作了。

參考資料