文章目的
當我們在使用電商網站時無論是前後台都會因為資料過多，無法即時找到含有特定條件的資料，本文將示範利用 v-model 簡單建立出後台的訂單篩選功能。
搞懂篩選機制(單選)
我們可以利用 radio 做出單選的篩選表單出來，當我們點選需要的 radio 時透過 value 出來的值來決定要顯示的資料。
替 radio 綁定 v-model
為甚麼要用 v-model 呢？原因是我們可以在每次點選 radio 時將 value 的值透過 v-model 儲存在 Vue 的 Data 裡，再利用 v-for 做資料篩選，以下是 radio 程式碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="form-check m-2">
<input class="form-check-input" type="radio" name="paidRadios" id="allRadios" value='all' checked v-model="selectOption">
<label class="form-check-label" for="allRadios">全部</label>
</div>
<div class="form-check m-2">
<input class="form-check-input" type="radio" name="paidRadios" id="paidRadios" value="paid" v-model="selectOption">
<label class="form-check-label text-success" for="paidRadios">已付款</label>
</div>
<div class="form-check m-2">
<input class="form-check-input" type="radio" name="paidRadios" id="unpaidRadios" value="nopaid" v-model="selectOption">
<label class="form-check-label text-muted" for="unpaidRadios">未付款</label>
</div>
</div>
|
這邊可以看到上述程式碼有3組個 radio 選項，每個選項的 value 值都不同，但都綁定相同的 v-model，當我們點選選項時，選項的 value 值就會被存進我們綁定的 v-model 上。
撰寫篩選條件
表單資料部分，利用 computed 做資料的篩選條件，像本次範例就以已付款、未付款作為篩選條件，以下是 computed 的範例程式碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| computed: {
selectOrders () {
const vm = this
if (vm.selectOption === 'all') {
return vm.orders
} else if (vm.selectOption === 'paid') {
return vm.orders.filter((item) => {
return item.is_paid
})
} else if (vm.selectOption === 'nopaid') {
return vm.orders.filter((item) => {
return !item.is_paid
})
}
}
}
|
這邊針對上述程式碼做個解釋，我們先將從後端抓到的所有訂單資料儲存在 orders 這個陣列裡，接著透過我們 v-model 綁定的 selectOption 來篩選特定條件的資料。
如果有預設頁面的顯示資料的話可以先在 selectOption 填入對應的值，像是如果一開始顯示全部資料我們可以填入all。
這樣就完成一個簡單的資料篩選功能囉~~~
參考資料
Vue.js: data、v-model 與雙向綁定