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 元件就能正常運作了。

參考資料


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)