I attempted to incorporate multiple .includes and .filters in my Vue.js computed function, but I have been unable to achieve success.
HTML:
<input class="searchbar" v-model="filterByName" placeholder="Search By Name" oninput="handleInput(event)">
<button type="button" class="btn btn-lg btn-primary">Advanced [BETA]</button>
<div class="padded">
<p>
All 9mm & 9×19mm are 9×19mm Parabellum unless otherwise stated. All Rate of Fire are SEMI-AUTOMATIC unless otherwise
stated.
</p>
<p>** - Still in testing phase (test place)</p>
</div>
...
JS
function handleInput(e) {
var ss = e.target.selectionStart
var se = e.target.selectionEnd
e.target.value = e.target.value.toUpperCase()
e.target.selectionStart = ss
e.target.selectionEnd = se
}
new Vue({
el: "#main",
data: {
...
},
computed: {
sortedlists() {
return this.lists
.filter((list) => list.name.includes(this.filterByName))
.sort((a, b) => a[this.sortBy] - b[this.sortBy])
},
},
})
I have been attempting to add another filter using
list => list.name.includes(this.filterByCal)