Vue 初心者筆記 #21 元件變換(上)
本篇文章單純是紀錄一下自己製作六角 Vue 課程,元件章節的作業的過程與邏輯。
將資料內容透過 “元件” 呈現
STEP 1:使用 v-for 製作多個元件
- 使用
props
傳遞外層的資料到內層 - 記得加上一個不重複的值作為
:key
1 | <city class="card" v-for="(item, key) in data" :key="item.SiteName" :cities='item'> |
STEP 2:將 Card 元件以 X-Template 呈現
1 | <script type="text/x-template" id="city"> |
製作城市過濾選項
STEP 1:製作不重複的選單選項
這邊有參考之前高雄旅遊網作業的寫法。
- 使用 Array.prototype.push() 方法
- 使用
Set()
+Array.from()
取出陣列的不重複值
1 | let origin = []; |
STEP 2:繪製元件時加入 v-if 判斷式
剛載入畫面、沒選擇時(selected == ''
),會顯示全部縣市的元件。
有選擇後(item.County == selected
),就會顯示該縣市的卡片元件。
1 | <city class="card" v-for="(item, key) in data" :key="item.SiteName" :cities='item' |
製作 “關注城市” 功能
STEP 1:增加關注城市
- 將內層資料透過
$emit
傳遞到外層
詳細步驟:
- 點擊卡片元件觸發
addToStared
事件。 - 使用
$emit
觸發實體上自訂的update-stared
事件。 - 觸發
updateStared(item)
事件,即可增加關注的城市。
1 | updateStared: function(item){ |
STEP 2:加上星號
- 使用插槽(這裡使用具名插槽),將已關注的城市加上星號
- 插槽內的圖示換為實心星星
<i class="fas fa-star"></i>
- 使用
v-for
渲染出stared
陣列裡的資料
1 | <city class="card" v-for="(item, key) in stared" :key="item.SiteName" :cities='item'> |
STEP 3:移除關注城市
- 如上段程式碼,使用
v-on:click.prevent
觸發cancelStared(item)
事件 - 使用
splice()
方法
1 | cancelStared: function(item){ |
依據不同污染呈現不同色彩
於 X-Template
中加入 v-bind
來動態加入 Class 名稱。
“判斷式” 可使用「陣列」的方式,加入多個條件式,以判定不同的汙染程度所對應的色彩。
1 | <script type="text/x-template" id="city"> |
加分題:透過 LocalStorage 儲存上次關注的城市
做法是當我們新增或移除關注城市時,同步將 stared
陣列的結果更新到 LocalStorage 上,達到儲存上次關注城市的功能。
1 | updateStared: function(item){ |
成品範例程式碼:
優化:LocalStorage 只儲存單個項目
最後,這個作業還要做一個小小的修正,就是將 LocalStorage 改為只儲存單個項目。
如果儲存整個資料,會造成遠端與本機資料因資料太大,而無法即時更新,而會有出現誤差的可能性。
要將 LocalStorage 改為只儲存單個項目,本人是以下列方式修改:
- 只把
item.SiteName
存入LocalStorage
。 - 透過
v-if
判斷stared
陣列裡是否包含item.SiteName
,如果有的話,就將這個item
呈現在關注城市內。
修正後的範例程式碼:
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。