- Vue.js 2.x by Example
- Mike Street
- 315字
- 2021-07-02 20:00:28
Filtering our filters
Now we have our filtering in place, we need to only show the radio buttons when the isActive option is selected in our dropdown. Using the knowledge we've learned, this should be relatively straightforward.
Create a new method that checks the select box value and returns true when Active User is selected in our dropdown:
isActiveFilterSelected() {
return (this.filterField === 'isActive');
}
We can now use v-show for both the input and radio buttons, reversing the effect when on the query box:
<label for="filterQuery" v-show="!isActiveFilterSelected()">
Query:
<input type="text" id="filterQuery" v-model="filterQuery">
</label>
<span v-show="isActiveFilterSelected()">
Active:
<label for="userStateActive">
Yes:
<input type="radio" v-bind:value="true" id="userStateActive"
v-model="filterUserState">
</label>
<label for="userStateInactive">
No:
<input type="radio" v-bind:value="false" id="userStateInactive" v-
model="filterUserState">
</label>
</span>
Take note of the exclamation point before the method call on the input field. This means not, and effectively reverses the result of the function, for example not true is the same as false and vice versa.
To improve user experience, we can also check that the filtering is active at all before showing either of the inputs. This can be added by including a secondary check in our v-show attribute:
<label for="filterQuery" v-show="this.filterField &&
!isActiveFilterSelected()">
Query:
<input type="text" id="filterQuery" v-model="filterQuery">
</label>
This now checks that filterField has a value and that the select box is not set to isActive. Make sure you add this to the radio buttons too.
A further user experience enhancement would be to ensure all the users don't disappear when the isActive option is chosen. This currently happens because the default is set to a string, which does not match with either the true or false values of the field. Before filtering in this field, we should check that the filterUserState variable is either true or false, that is a Boolean. We can do this by using typeof once more:
if(this.filterField === 'isActive') {
result = (typeof this.filterUserState === 'boolean') ?
(this.filterUserState === person.isActive) : true;
}
We are using a ternary operator to check that the result to filter on is boolean. If it is, then filter as we were; if it is not then simply show the row.
- 深入理解Android(卷I)
- Advanced Machine Learning with Python
- Apache Oozie Essentials
- OpenDaylight Cookbook
- Access 2010數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用項(xiàng)目式教程(第3版)
- Building Minecraft Server Modifications
- Learning Apache Mahout Classification
- Python機(jī)器學(xué)習(xí):預(yù)測(cè)分析核心算法
- Red Hat Enterprise Linux Troubleshooting Guide
- 深入理解BootLoader
- Web編程基礎(chǔ):HTML5、CSS3、JavaScript(第2版)
- Offer來(lái)了:Java面試核心知識(shí)點(diǎn)精講(框架篇)
- 啊哈C語(yǔ)言!:邏輯的挑戰(zhàn)(修訂版)
- 深入大型數(shù)據(jù)集:并行與分布化Python代碼
- Koa與Node.js開(kāi)發(fā)實(shí)戰(zhàn)