I have a vue.js table of pokemons in which I can already search by pokemon's name and generation. And also I can sort the table columns asc/desc if I click in any of them.
I want to introduce multiple checkboxes to this program where I can filter out the table by pokemon types. This checkbox filter should work together with the search filtering, so if I search pokemon generation "IV" with the search field I want to further filter those hits with the checkboxes.
I figured I could not use computed instead I always transfigure my array (pokemonList) to my needs and keep a copy of the original array in a different data variable (originalData). But I don't know how should I implement in this setting the checkbox filtering (checkboxChange method).
This is my template:
<f7-searchbar
placeholder="Name and generation search"
:clear-button="true"
:disable-button="true"
disable-button-text=""
v-model:value="searchTerm"
></f7-searchbar>
<div class="filters">
<f7-checkbox @change="checkboxChange" value="fire"><span>Fire types</span></f7-checkbox>
<f7-checkbox @change="checkboxChange" value="water"><span>Water types</span></f7-checkbox>
<f7-checkbox @change="checkboxChange" value="ground"><span>Ground types</span></f7-checkbox>
<f7-checkbox @change="checkboxChange" value="poison"><span>Poison types</span></f7-checkbox>
</div>
<div class="pokemon-table">
<table>
<thead>
<tr>
<th @click="sort('name')"><span :class="getSortingDirection('name')"></span>Name</th>
<th @click="sort('generation')"><span :class="getSortingDirection('generation')"></span>Generation</th>
<th @click="sort('power')"><span :class="getSortingDirection('power')"></span>Power</th>
</tr>
</thead>
<tbody>
<tr v-for="pokemon in pokemons" :key="pokemon.id" @click="selectRow(pokemon.id)" :class="{'highlight': (pokemon.id == selectedRow)}">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And this is my script tag in which
export default {
data() {
return {
originalData: [],
pokemonList: [],
searchTerm: '',
sortBy: '',
sortOrder: 1,
selectedRow: null,
}
},
beforeMount() {
const self = this;
ajax.methodCall('/Pokemon/Pokemonlist')
.then(result => self.pokemonList = result.pokemonList)
.finally(() => self.originalData = self.pokemonList);
},
methods: {
getFilteredList() {
const self = this;
let searchData = self.originalData;
if (self.searchTerm == '') {
self.pokemonList= self.originalData;
} else {
self.pokemonList = searchData.filter(pokemon => {
const name = pokemon.name.toLowerCase();
const generation = pokemon.generation.toLowerCase();
const searchTerm = self.searchTerm.toLowerCase();
return name.includes(searchTerm) || generation.includes(searchTerm)
})
}
},
sort(sortBy) {
const self = this;
if (self.sortBy == sortBy) {
self.sortOrder = -self.sortOrder;
} else {
self.sortBy = sortBy;
}
self.pokemonList= self.pokemonList
.sort((a,b) => {
if (a[self.sortBy] >= b[self.sortBy]) {
return self.sortOrder
}
return -self.sortOrder
})
},
getSortingDirection(sortBy) {
if(sortBy == this.sortBy) {
return this.sortOrder == 1 ? 'asc' : 'desc';
}
},
selectRow(id) {
this.selectedRow != id ? this.selectedRow = id : this.selectedRow = null;
},
checkboxChange(e) {}
},
watch: {
searchTerm() {
this.getFilteredList();
}
}
}
The data structure of an pokemon in pokemonList is like this:
pokemonList: [
{
id: 0,
name: 'Charizard',
generation: 'I',
power: 244,
type: 'fire',
},
]
