Can someone help me identify what I might be doing incorrectly? I have a chained filter under computed that is giving me an error message stating 'product.topic.sort' is not a function.
My intention is to use 'select' to provide sorting options such as ascending, descending, high price, and low price.
The v-model is binding the value to the JavaScript.
In the filters section, I'm attempting to add a filter that sorts based on the 'value'.
If the value is undefined, nothing should happen.
If the value is 'Az', it should sort in ascending order.
If the value is 'Za', it should sort in descending order.
If the value is 'Ph', it should prioritize high prices.
If the value is 'Pl', it should prioritize low prices.
Edit
Within the filteredSearch() { method, there are other filters present:
.filter(product => this.filters.some(filter => product.topic.match(filter))) ||
this.products
.filter(p => p.topic.toLowerCase().match(this.search.toLowerCase()))
.filter(p => p.price <= this.priceFilter)
I need to ensure that all the other filters are compatible with the sort filter.
HTML
<div id="app">
<h4>Sort</h4>
<select v-model="value">
<option value="Az">Ascending</option>
<option value="Za">Descending</option>
<option value="Ph">Price High</option>
<option value="Pl">Price Low</option>
</select>
<div class="block" v-for="product in filteredSearch">
<h3>{{product.topic}}</h3>
<p>{{product.price}}</p>
</div>
</div>
JS
var app = new Vue({
el: '#app',
data: {
products: [{
"topic": "english",
"price": "20"
},
{
"topic": "french",
"price": "60"
},
{
"topic": "science",
"price": "80"
}
],
value: "",
})
computed: {
filteredSearch() {
return this.products
.filter((product) => {
if (!this.value)
return true;
if (this.value == "Az") {
return product.topic.sort(function(a, b) {
a.topic - b.topic
});
}
})
}
}
});