(3-1)動作拆解-品牌受眾
分為資料渲染與觸發方法兩部分說明。

1.下拉選項內容
使用 v-for="item in restaurants" 對 restaurants.type 品牌受眾進行多筆資料渲染。
延伸思考：當 restaurants.type 值有重覆時要怎麼不重覆

2.當欄位「品牌受眾」被操作時

• 標籤 <select></select> 加上 v-model="tempRes.selectType" 將會員所選的項目內容為值去變更 data 裡的屬性 tempRes.selectType 。
• 會觸發方法裡的 selectTypeChange() 函式
  • 讓會員所選的值（tempRes.selectType）賦值給 filterRes.filterType ，後續要給欄位「品牌名稱」做判斷用。
  • 為提升用戶體驗，情境中允許會員透過"全部受眾"項目，讓欄位「品牌名稱」列出所有名稱。這邊用會員所選的值（tempRes.selectType）來判斷
    • (1)當所選不等於"全部受眾"，透過 tempRes.selectType 為過濾條件在 restaurants（餐廳 API 取得的資料）裡的屬性 type 值中搜尋，符合者取出其 restaurants.brandName 品牌名稱並用 map 來建立新陣列 filterRes.filterBrandName 儲放搜尋結果。
    • (2)當所選等於"全部受眾"則列出全部品牌名稱（restaurants.brandName）並賦值給 filterRes.filterBrandName 。
  • 假定會員選完所有欄位，又回頭變更欄位「品牌受眾」，觸及下拉選單後其它欄位可以恢復預設值，而不是殘留前一次選擇的內容。於 selectTypeChange() 函式末端讓欄位「品牌名稱」與「地址」賦值為初始值。

<template>
  ...
  <form>
  ...
  <label for="type" class="col-sm-3 col-form-label">品牌受眾</label>
  <select
    name="品牌受眾"
    id="type"
    class="form-select col-sm"
    @change="selectTypeChange"
    v-model="tempRes.selectType">
    <option value="" disabled selected>請選擇品牌受眾</option>
    <option value="全部受眾">全部受眾</option>
    <option :value="item.type" v-for="item in restaurants" v-bind:key="item.id">
      {{ type }}
    </option>
  </select>
  ...
  </form>
  ...
</template>

<script>
...
export default {
  data() {
    return {
      restaurants: [],
      filterRes: {
        filterBrandName: [],
        filterType: [],
        filterAddress: [],
      },
      tempRes: {
        selectBrandName: "",
        selectType: "",
      }
    };
  }
...
  methods: {
    selectTypeChange() {
      ...
      this.filterRes.filterType = this.tempRes.selectType;

      if (this.tempRes.selectType !== "全部受眾") {
        // 會員選擇受眾時，依照所選受眾去restaurants找相應的品牌名稱
        this.filterRes.filterBrandName = this.restaurants
          .filter((item) => item.type === this.tempRes.selectType)
          .map((item) => item.brandName);
      } else {
        // 會員選擇全部受眾時，列出restaurants全部品牌名稱
        this.filterRes.filterBrandName = this.restaurants.map(
          (item) => item.brandName);
      }
      // 當會員回頭更改選品牌受眾。請讓其他兩個欄位重置成預設值
      this.tempRes.selectBrandName = "";
      this.filterRes.filterAddress = [];
    },
  },
};
...
</script>