目前為止，我們成功引入了 BootstrapVue 的元件 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> 中全部條列式的寫法一模一樣。

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

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

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

參考資料

• Vue - List Rendering
• Vue - API - v-for