Day 09：遍历资料好便利－v-for

目前为止，我们成功引入了 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