接續昨天未完成的部分...

將藥局資料套用至左側列表

下一步就是要來處理藥局資料，在asideMenu.vue的computed取state(記得加入import {mapState} from "vuex")

computed: {
  currCity: {...},
  currDistrict: {...},
	...mapState(["stores"]),
  ...mapGetters(["cityList", "districtList"]),
},

用v-for改寫模板中的藥局列表區

<ul class="store-lists">
  <li class="store-info wraps" v-for="s in stores" :key="s.id">
    <h1>{{ s.name }}</h1>

    <div class="mask-info">
      <i class="fas fa-head-side-mask"></i>
      <span>大人口罩: {{ s.mask_adult }} 個</span>
    </div>

    <div class="mask-info">
      <i class="fas fa-baby"></i>
      <span>兒童口罩: {{ s.mask_child }} 個</span>
    </div>

    <div class="mask-info">最後更新時間:{{ s.updated }}</div>

    <button class="btn-store-detail">
      <i class="fas fa-info-circle"></i>
      看詳細資訊
    </button>
  </li>
</ul>

到此步驟大致有了個模樣，但藥局的部分並沒有被過濾而是一次列出所有的資料，所以要回到store/index.js增加一個getters處理資料

filteredStores(state) {
  //依縣市和行政區分組
  const { stores } = state
  return stores.filter((d) => d.county === state.currCity && d.town === state.currDistrict)
}

回到asideMenu.vue修改computed和模板

computed: {
  currCity: {...},
  currDistrict: {...},
	//刪除...mapState(["stores"]),
	//新增filteredStores
  ...mapGetters(["cityList", "districtList","filteredStores"]),
},

<ul class="store-lists">
  <li class="store-info wraps" v-for="s in filteredStores" :key="s.id">
  </li>
</ul>

這樣藥局就會跟著所選的區域更動了!!

藥局列表與關鍵字搜尋連動

左側選單就剩下最後一塊關鍵字搜尋，

首先，在store/index.js中的state加上一個新的屬性

state: {
  currCity: '臺北市',
  currDistrict: '北投區',
  location: [],
  stores: [],
  keywords:''
},

以及對應的mutations

setKeywords(state, payload) {
  state.keywords = payload
}

在asideMenu.vue新增對應的computed屬性

keywords: {
  get() {
    return this.$store.state.keywords;
  },
  set(value) {
    this.$store.commit("setKeywords", value);
  },
},

到getters改寫filteredStores，有關鍵字的情況下無視縣市區的分組條件

filteredStores(state) {
  //依縣市和行政區分組
  const { stores } = state
  //加入關鍵字判斷
  return state.keywords
    ? stores.filter((d) => d.name.includes(state.keywords))
    : stores.filter((d) => d.county === state.currCity && d.town === state.currDistrict)
}

最後，讓關鍵字有hightlight的效果以增加使用者的體驗

在asideMenu.vue新增methods屬性

methods: {
  keywordsHighlight(val) {
    return val.replace(
      new RegExp(this.keywords, "g"),
      `<span class="highlight">${this.keywords}</span>`
    );
  },
},

並將模板中的h1做改寫

<h1 v-html="keywordsHighlight(s.name)"></h1>

加上顏色的style

.highlight {
  color: #f09d49;
}

側選單的部分就完成拉!!!