iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

Vue.js 什麼意思系列 第 9

Day 09:遍歷資料好便利-v-for

目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。
navbar

突然發現少放了一個重要項目,於是趕緊補上一個 <b-nav-item>:

<b-navbar-nav class="my_navbar_item">
	<b-nav-item href="#">全部書單</b-nav-item>
	<b-nav-item href="#">七折區</b-nav-item>
	<b-nav-item href="#">五折區</b-nav-item>
	<b-nav-item href="#">iT邦幫忙鐵人賽系列書</b-nav-item>
</b-navbar-nav>

邊新增邊思考,如果項目愈來愈多,這串 <b-nav-item> 不就會跟著愈來愈長嗎?看到重複的程式碼,就會覺得說不定有其他寫法可以解決。

template 裡的 forEach

首先,在 <script> 把這串 <b-nav-item> 整理成一個名為 navList 的陣列資料。

<script>
export default {
  name: "Navbar",
  data() {
    return {
      navList: [
        { id: 1, item: "全部書單" },
        { id: 2, item: "七折區" },
        { id: 3, item: "五折區" },
        { id: 4, item: "iT邦幫忙鐵人賽系列書" },
      ],
    };
  },
};
</script>

接著,在 <template> 使用 v-for 遍歷出 navList 的各個項目,顯示在畫面上的內容則以模版語法更新插值 data

<b-navbar-nav
	class="my_navbar_item"
	v-for="navItem in navList"
	:key="navItem.id"
>
	<b-nav-item href="#">{{ navItem.item }}</b-nav-item>
</b-navbar-nav>

如果一時之間搞不清楚它們的內容和關係,可以用陣列資料的方式來幫助理解。

  • navList:一個陣列資料,包含四組物件內容
  • navItem:逐一被陣列遍歷的元素,等同於這四組物件
  • item:物件裡的 key 值
  • navItem.item:物件屬性取值,取得 item 對應的 value 值
const navList = [
  { id: 1, item: "全部書單" },
  { id: 2, item: "七折區" },
  { id: 3, item: "五折區" },
  { id: 4, item: "iT邦幫忙鐵人賽系列書" },
];

navList.forEach(navItem => console.log(navItem));
// { id: 1, item: '全部書單' }
// { id: 2, item: '七折區' }
// { id: 3, item: '五折區' }
// { id: 4, item: 'iT邦幫忙鐵人賽系列書' }

因此在 <template> 的模版語法中,{{ navItem.item }} 渲染出來的資料其實就是 item 對應的 value 名稱,渲染結果跟一開始在 <template> 中全部條列式的寫法一模一樣。
new navbar

有些人可能會好奇,雖然 <template> 變得簡潔了,但資料全都跑到 <script>,程式碼行數不是差不多嗎?

起初會使用 v-for 渲染列表,其實原因很單純,就是想要練習在各種情境使用 Vue 的語法而已,主要也是覺得 HTML 內容有重複的跡象,感覺很適合這般處理。或許也有人會覺得在導覽列使用 v-for 有些大才小用,畢竟資料量也不多何必跑個迴圈遍歷?

但是經過這番調整,我的體會是只要我先完善 <template> 的畫面架構,讓它只需要負責渲染在 <script> 準備好的資料即可,如此一來我就可以集中在 data 管理所有資料,也能快速的處理新增、修改、刪除等內容調整。我不用再回到 HTML 從可能很巢狀的標籤海裡找到文字落點,只需要將變數命名的足夠名符其實,那麼在 data 中便能快速查找到對應內容並予以更新。不知道大家偏好哪一種處理方式呢?

參考資料


上一篇
Day 08:深仍可測的元件樣式-Deep Selectors
下一篇
Day 10:v-for 註定綁個 key
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言