I've been attempting to utilize a computed property to filter the displayed results while using a v-for loop. However, despite setting the bars.js data to only show one item with 'true', all bars are still visible in my application. I expected to see only one bar but seems like something is going wrong. Any assistance would be greatly appreciated.
My reference source is https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd
<li v-for="bar in bars" :key="bar.id">
<h2>{{ bar.barName }}</h2>
</li>
<script>
import bars from "./../data/bars";
export default {
data() {
return {
bars: bars
};
},
computed: {
bars: function() {
return this.default.filter(function(u) {
return u.newListing
})
}
}
};
</script>
In a separate file named bars.js, the contents include:
export default [
{
barName: "Mikes",
newListing: true,
},
{
barName: "Cheers",
newListing: false,
},
{
barName: "Biker Bar",
newListing: false,
}
];