javascript - 重置过滤数据Vue.js
问题描述
我需要实现一个按钮,将过滤器放在我的应用程序中。该应用程序是在 Vue 上编写的。过滤器本身已实现,但我不知道如何实现它们的重置。
<template>
<div id="app">
<input type="text" v-model="search">
<select name="sort" v-model="sort">
<option v-for="option in options" :value="option.value" :label="option.label"></option>
</select>
<table>...</table>
</div>
</template>
<script>
import goodsList from './api/data';
export default {
name: 'app',
data() {
return {
search: '',
sort: '',
options: [
{ label: 'Default', value: 'none' },
{ label: 'Brand', value: 'brand' },
{label: 'Price', value: 'price'}
],
goods: goodsList,
}
},
computed: {
filteredList() {
let filteredGoods = this.goods.filter( item => {
return item.name.toLowerCase().includes(this.search.toLowerCase());
});
switch (this.sort) {
case 'brand':
filteredGoods.sort((a, b) => a.brand.localeCompare(b.brand));
break;
case 'price':
filteredGoods.sort((a, b) => parseInt(a.price - b.price));
break;
}
return filteredGoods;
}
},
}
</script>
解决方案
您将需要一个重置功能,它将默认选定值分配,例如:'none' 给 v-model 'sort'。由于它是双向绑定,因此更改 'sort' 变量的值最终将重置所选选项。
新增功能:
resetOptions: function () {
this.sort='none';
}
推荐阅读
- nlp - 隐马尔可夫模型:处理删除/插入
- java - 如何禁用过滤器等休眠公式?这可能吗?
- algorithm - SAS分组算法
- vue.js - 与 createElement 一起使用时,vuejs ref 属性无效
- c++ - 无法在 qt 中为来自 QWidget 的派生类设置样式表
- php - 将 PHP 数组数据(来自 XML)插入 SQL 不起作用
- javascript - 无法从 iTunes API 的 JSON 获取对象
- android - App Bundle (AAB) 和不透明二进制 Blob (OBB) 文件
- python - 如何在python中计算复杂的联立方程?
- firebase - 生成私钥 firebase admin sdk