(3-2)動作拆解-品牌名稱與地址
分為資料渲染與觸發方法兩部分說明。

1.下拉選項內容
使用 v-for="item in filterRes.filterBrandName" 將符合品牌受眾條件的 filterRes.filterBrandName 品牌名稱進行多筆資料渲染。

2.當欄位「品牌名稱」被操作時

• 標籤 <select></select> 加上 v-model=tempRes.selectBrandName 將會員所選的項目內容為值去變更 data 裡的屬性 tempRes.selectBrandName 。
• 會觸發方法裡的 selectNameChange() 函式
  • 欄位「品牌名稱」選擇後會以 tempRes.selectBrandName 為過濾條件在 restaurants（餐廳 API 取得的資料）裡的屬性 brandName 值中搜尋，符合者取出其 restaurants.address 地址並用 map 來建立新陣列 filterRes.filterAddress 。
  • 為提升用戶體驗欄位「品牌受眾」增加了"全部受眾"，待會員選完「品牌名稱」後再對「品牌受眾」進行調整，使之變為正確相應的「品牌受眾」值並賦值給 saveRes.saveType ，這樣才能把正確的資料回傳到會員餐廳 API 。
    • 以 tempRes.selectBrandName 為過濾條件在 restaurants（餐廳 API 取得的資料）裡的屬性 brandName 值中搜尋，符合者取出其 restaurants.type 品牌受眾並用 map 來建立新陣列 filterRes.filterType 。

<template>
  ...
  <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"
    @change="selectNameChange"
    v-model="tempRes.selectBrandName">
    <option value="" disabled selected>請選擇品牌名稱</option>
    <option
      :value="item"
      v-for="item in filterRes.filterBrandName"
      v-bind:key="item">
      {{ item }}
    </option>
  </select>
  ...
</template>

<script>
...
export default {
  data() {
    return {
      restaurants: [],
      filterRes: {
        filterBrandName: [],
        filterType: [],
        filterAddress: [],
      },
      tempRes: {
        selectBrandName: "",
        selectType: "",
      },
      ...
    };
  }
...
  methods: {
    selectNameChange() {
      // 會員選擇品牌名稱時，依照所選名稱去restaurants找相應的地址
      this.filterRes.filterAddress = this.restaurants
        .filter((item) => item.brandName === this.tempRes.selectBrandName)
        .map((item) => item.address);

      if (this.filterRes.filterType === "全部受眾") {
        // 當品牌受眾=全部受眾時，依照所選品牌名稱去restaurants找正確的受眾值。將全部受眾進行導正
        this.filterRes.filterType = this.restaurants
          .filter((item) => item.brandName === this.tempRes.selectBrandName)
          .map((item) => item.type);
          
        // 將取得的真正品牌受眾值賦值給寫回api的saveRes.saveType屬性
        this.saveRes.saveType = this.filterRes.filterType[0];
      }
    },
  },
  ...
};
</script>