目標
上一篇我們將支援名單的兩個資訊加進localStorage
接下來的兩篇會描述利用這些資料呈現畫面上的結果

步驟
1.
在開始之前 先補做上一篇未完成的事情
點擊副本名稱的圖片會出現左邊的支援名單
但是這個要提示使用者
所以我在C組件加一個提示訊息吧
程式架構調整如下

<script setup>
function showMessageEvent(msg,msg2){
	showMessage.value.display = true;
	showMessage.value.message = `點擊${msg}會出現${msg2}哦!`
}
function hideMessageEvent(msg,msg2){
	showMessage.value.display = false;
	showMessage.value.message = ""
}
</script>

<template>

<img :src="getImg(item.eventNo)" style="width:100%;" @click="supportEvent(item.eventNo)" 
			@mouseenter="showMessageEvent('副本圖片','支援名單')" @mouseleave="hideMessageEvent('副本圖片','支援名單')">
			<span v-show="showMessage.display">{{showMessage.message}}</span>
			
//....中間略
			
<li class="list-group-item" v-for="child in item.eventInfo" :key="child"
					:data-eventNo="item.eventNo" :data-stagePrimaryNo="child.substring(0,2)" 
					:data-stageSecNo="child.substring(2,4)" @click="selectEvent"
					@mouseenter="showMessageEvent('關卡名稱','敵人資訊')" @mouseleave="hideMessageEvent('關卡名稱','敵人資訊')"
					>
					{{ String(parseInt(child.substring(0,2))).padStart(2, ' ')}}
						-
					{{ String(parseInt(child.substring(2,4))).padStart(2, ' ')}}
					</li>
					
</template>					

下圖紅框為調整的地方

接著回到F組件 將localStorage東西拿出來
作法與之前副本一樣
引用Module

<script setup>
const images2 = require.context('@/assets/Fairy', false, /\.png$/)
const favoriteList = useLocalStorageRef("favoriteList");
const showfavoriteSupportFilterList = computed(() => {
	return (!Array.isArray(favoriteSupportList.value) || favoriteSupportList.value.length === 0) 
	? false
	: true
})
function getImg2(cardNo) {
  return images2(`./${cardNo}.png`)
}
</script>

在template中新增一個區塊
放支援精靈的資料
我們就放在副本列表的下方
由於v-else他是會跟著上一層的v-if
所以我們最後一行的v-else要修改一下判斷
依照兩邊的資料做判斷

<template>

//....中間略
<div v-if="showfavoriteSupportFilterList">
	支援收藏
	<div class="row row-cols-3 g-4">
		<div class="col" v-for="item in favoriteSupportList" :key="item.cardNo">
			<div class="card">{{item.name}}
			
			<div class="card-body">
				<h5 class="card-title"><img :src="getImg2(item.cardNo)" class="card-img-top" alt="item.name" ></h5>
				
			</div>
			</div>
		</div>
	</div>
</div>
<div v-if="!showfavoriteFilterList && !showfavoriteSupportFilterList">尚未有資料，請新增資料至我的最愛</div>	
	
</template>

而上述的結構 我們同樣利用Bootstrap網格系統
row-cols-3 代表的是在這一個row中 允許放幾個col
這邊代表一行最多有3個col填滿，第4個就會折到下一行

然後我們將移除功能也補進來
下圖紅框是我們要修改的地方

調整script的架構
因為我們之前的寫法 是直接在元素上寫removeList事件
沒有需要傳參數 所以可以直接用event.target的方式取得這個物件資料
因為我們現在有傳參數以及取得event的需求
所以會應外使用到參數$event，這個在Vue中是保留字
指的是觸發事件的這個物件

<script setup>
function removeList(name,e){
	if(!confirm("確認移除該筆資料嗎?")){return;}
	const removeData = e.target.getAttribute("data-info");
	
	if(name == "移除副本"){
		favoriteList.value = favoriteList.value.filter(x=> x.rrn != removeData)
	}
	if(name == "移除支援"){
		favoriteSupportList.value = favoriteSupportList.value.filter(x=> x.cardNo != removeData)
	}
	
}
</script>

完成後，我們驗證一下這個移除功能
第三筆資料被刪除後 下面那一筆也跑上來了
那麼我們下一篇即將進入這個網站的收尾工作
完成開頭載入的功能 這個部分會用到我們之前更新的頭像

備註
由於這個網站查詢功能 我規劃都是在同一個畫面上呈現
不會有跳頁的需求 這跟大多數網站不一樣
所以一次最多也只有4個組件
在組件的切換上 我有另外調整display 不然會有顯示BUG
這部分沒有另外再發文講述 要特別注意哦