目標
Template放上區塊後
將處理好後的資料套用上去
並調整區塊背景、文字顏色等樣式的細節

步驟
1
敵人資訊會以每一個關卡(Stage)呈現
每一個關卡的資訊可以摺疊或展開顯示
所以這邊我們借用Bootstrap提供的手風琴元件(Accordion)

程式架構節錄其中一段

<div class="accordion" id="accordionExample"> <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div></div>

2
每個關卡的敵人數量會有以下4種狀況
所以會分別針對這四種狀況 用v-if 的方式呈現四種狀況的畫面
例如5個敵人的關 需要塞九宮格
從左至右、從上到下總共有9個格子 只有1、3、5、7、9會有資料
其他敵人站位依此類推

3
我們將手風琴效果加上上述四種狀況的判斷加進來
以下是A組件Template的架構

<template>

<div v-if="showStageList">敵人資訊
	<div class="row" v-for="item in stageList" :key="item.stageOrder">
		<div class="col-12">
			<div class="accordion" id="accordionExample">
				<div class="accordion-item">
					<h2 class="accordion-header" :id="item.stageOrder">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#collapse' +item.stageOrder" aria-expanded="false" aria-controls="collapseTwo">
						{{item.stageOrder}}
					</button>
					</h2>
					<div :id="'collapse' +item.stageOrder" class="accordion-collapse collapse show" :aria-labelledby="item.stageOrder" data-bs-parent="#accordionExample">
						<div class="accordion-body row" v-if="item.enemyInfo.length ==5">
							<div class="col-4" v-for="i in 9" :key="i">
								<div v-if="i%2 !=0 && item.enemyInfo[(i-1)/2]" >
									<p>{{item.enemyInfo[(i-1)/2].species}}</p>
									<p>HP:{{item.enemyInfo[(i-1)/2].hp}}</p>
								</div>
							</div>
						</div>
						
						<div class="accordion-body row" v-if="item.enemyInfo.length ==3">
							<div class="col-4" v-for="i in 3" :key="i">
								<div v-if=" item.enemyInfo[i-1]" >
									<p>{{item.enemyInfo[i-1].species}}</p>
									<p>HP:{{item.enemyInfo[i-1].hp}}</p>
								</div>
							</div>
						</div>
						
						<div class="accordion-body row" v-if="item.enemyInfo.length ==2">
							<div class="col-4" v-for="i in 3" :key="i">
								<div v-if="i%2 !=0 && item.enemyInfo[(i-1)/2]" >
									<p>{{item.enemyInfo[(i-1)/2].species}}</p>
									<p>HP:{{item.enemyInfo[(i-1)/2].hp}}</p>
								</div>
							</div>
						</div>
						
						<div class="accordion-body row" v-if="item.enemyInfo.length ==1">
							<div class="col-4" v-for="i in 3" :key="i">
								<div v-if="i%2 ==0" >
									<p>{{item.enemyInfo[0].species}}</p>
									<p>HP:{{item.enemyInfo[0].hp}}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</template>

按下副本後(例如5-1)
就會呈現左側的畫面
到了這邊，敵人資訊的顯示已經有一個雛型了

4
然後，我們把一些顏色標示加進來
因為敵人屬性會顯示不一樣顏色的區塊
火屬性呈現紅色、水屬性呈現淡藍色..等
這邊我們也用Bootstrap的樣式 讓它做簡單的變化

以下Template節錄其中一小段
在class我們加入一個函式做判斷

<div class="col-4" v-for="i in 9" :key="i">
								<div v-if="i%2 !=0 && item.enemyInfo[(i-1)/2]" :class="EnenmyBgColor(item.enemyInfo[(i-1)/2].element)">
									<p>{{item.enemyInfo[(i-1)/2].species}}</p>
									<p>HP:{{item.enemyInfo[(i-1)/2].hp}}</p>
								</div>
							</div>

每個區塊會依據
帶進來的敵人屬性的參數 做判斷
例如 火屬性的區塊我想呈現紅色
bg-danger是bootstrap已經定義好的顏色
經過函式處理，它綁定class屬性就會是 :class={"bg-danger": true}
再經Vue的渲染後，在網頁上的屬性就變成 class="bg-danger"

<script setup>
function EnenmyBgColor(element){

	const bgObject = {
		"bg-danger": false,
		"bg-info":false,
		"bg-warning":false,
		"bg-indigo":false,
		"border":true,
		"text-white":false
	};
	if (element === "火") {
		bgObject["bg-danger"] = true;
	}
	else if(element === "水") {
		bgObject["bg-info"] = true;
	}
	else if(element === "雷") {
		bgObject["bg-warning"] = true;
	}
	else if(element === "闇") {
		bgObject["bg-indigo"] = true;
		bgObject["text-white"] = true;
	}
	
	return bgObject;
}
</script>

這樣我已經完成了敵人顏色區塊的處理
最後補上敵人技能與行動的資訊

5
因為敵人資訊裡面還有各種行動
比如 一般行動、先制行動等
所以該名敵人資訊裡頭 會再切割區塊 一樣用v-for與v-if搭配實現
由於程式架構較複雜 就不貼過來了

以下畫面的結果
是將血量經過千分位格式處理
行動順序的數字也加入下列樣式調整

<style>
.bg-indigo {
  background-color: indigo;  
}
.circle{
 display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;         /* 圓的寬度 */
  height: 1em;        /* 圓的高度 */
  border: 1px solid #000;
  border-radius: 50%; /* 變成圓形 */
  margin: 0.2em;
}
</style>

這樣子，敵人資訊基本上畫面已經完成了一個階段
接下來會實現「我的最愛」的功能

備註
這邊的Template區塊有點像前輩們講的波動拳的狀況
就像下面這張圖一樣 我針對這種情況比較沒有頭緒
如果有人知道怎麼處理更好 請留言讓我知道