對於前端新手來說，編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法，建議先專注於建立想要的 html 架構，從靜態畫面開發去著手，先專注排版和介面設計。這樣做有助於在腦海中更明確地有形成畫面的想像，確保開發者清楚明白最終渲染結果應該是什麼樣子。透過這種方式，可以更有效地為所需的內容規劃和編寫 JavaScript 去動態渲染畫面。

靜態畫面
下圖為理想的畫面示意圖，分為兩個部分說明。

• 上面區塊（喜愛的品牌選單）
  • 提供一個表格選單給會員去建立喜愛的集團餐飲品牌清單（稱為口袋餐廳）。
  • 欄位有品牌受眾、品牌名稱、地址三個欄位。預計這邊的資料要取自餐廳 API ，並由 v-for 進行資料渲染。品牌受眾、品牌名稱會做為篩選條件去秀出相應的地址。因此該欄位是唯讀狀態。表格下方則有一提交按鈕。
    • 補充：地址欄位與提交按鈕之間可以放餐廳相應的 Google 地圖。網頁嵌入地圖有兩種方法 Google Maps API、嵌入 Google 地圖標籤。可依據會員挑選出的品牌受眾、品牌名稱來顯示。各位讀者可以試試看。
• 下面區塊（篩選後的口袋清單）
  • 以表單形式顯示所選的口袋餐廳。
  • 資料是用 JavaScript 進行動態渲染，最右側提供會員編輯口袋餐廳功能，目前僅提供移除權限。