本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整，試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾篇來說明。

(1)選單操作情境
寫程式前先想一下口袋餐廳頁面中喜愛的品牌選單（以下簡稱選單）各欄位之間有什麼使用情境與限制。

[情境]

• 會員進入頁面且尚未進行動作時選單各欄位的預設值
  • 欄位「品牌受眾」預設顯示"請選擇品牌受眾"；「品牌名稱」顯示"請選擇品牌名稱"。兩個欄位的下拉選單 <option> 新增"請選擇品牌受眾"和"請選擇品牌名稱"選項。它只是預設值不是真正的選項，所以屬性要加上 disabled selected ，並建議 value="" 設為空值以符合情境。
  • 若會員喜愛品牌不曉得所屬受眾，欄位「品牌受眾」下拉選單增加"全部受眾"項目，會員選擇後欄位「品牌名稱」會列出所有名稱，以提升用戶體驗。後續會再依照會員所選「品牌名稱」為條件去調整「品牌受眾」為相應值。
  • 欄位「地址」是唯讀欄位且預設不顯示內容。 <input> 增加屬性 disabled 使之唯讀狀態。

[限制]

• 會員選取欄位「品牌受眾」後「品牌名稱」才可以操作，故該欄位先設成禁用。在品牌受眾 <select> 裡增加 selectTypeChange() 函式。當欄位被操作時會觸發方法裡的 selectTypeChange() 函式，使 data 中屬性 brandListDisabled 從頁面載入時的初始值 true 被改為 false （表示禁用為 false 即可操作之意），進而達到表單操作限制要求。

<!-- 品牌受眾 -->
<label for="type" class="col-sm-3 col-form-label">品牌受眾</label>
            <select
              name="品牌受眾"
              id="type"
              class="form-select col-sm"
              @change="selectTypeChange">
              <option value="" disabled selected>請選擇品牌受眾</option>

<!-- 品牌名稱 -->
<label for="res-name" class="col-sm-3 col-form-label">品牌名稱</label>
            <!-- :disabled 避免會員跳過選類型而直接選名稱 -->
            <select
              name="品牌名稱"
              id="res-name"
              class="form-select col-sm"
              :disabled="brandListDisabled">
            <option value="" disabled selected>請選擇品牌名稱</option>
            <option value="全部受眾">全部受眾</option>

<!-- 地址 -->
<label for="address" class="col-sm-3 col-form-label">地址</label>
            <input 
              class="form-control col-sm"
              type="text"
              disabled
              id="address" />

<script>
export default {
  data() {
    return {
      brandListDisabled: true, // 控制品牌名稱選單是否可以操作
    };
  },
  methods: {
    selectTypeChange() {
      // 當會員下拉品牌受眾時，變更這個屬性值，讓品牌名稱選單可以操作
      this.brandListDisabled = false;
    }}
  <script>