As a newcomer to Vue, I am facing what seems like a simple and common task but the solution is escaping me. I need to filter some data and then display the count in a component.
This is the HTML structure:
<main class="container-fluid">
<div class="row" id="main-app">
<div class="col">
<div class="card border-secondary mb-3" style="min-height: 400px;">
<div class="card-body">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Find Items" v-model="search">
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card border-secondary mb-3">
<div class="card-body">
<h4 class="card-title">Items <item-counter :count="resultCount"></item-counter></h4>
<div class="row">
<div class="col" id="results">
<ul class="list-group list-group-flush">
<li class="list-group-item" v-for="app in filteredApps" :key="app.id">
<div class="d-flex w-100 h-100 align-self-center">
<a :href="app.link">{{app.name}}</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
Incorporating Vue JS:
var ItemCounter = Vue.component('item-counter', {
props: ['count'],
template: '<span class="badge badge-primary badge-pill">{{ count }}</span>'
});
var vmResults = new Vue({
el: '#main-app',
data: {
search: '',
items: [
{
"id": 1,
"name": "Item 1",
"link": "https://www.google.com"
},
{
"id": 2,
"name": "Item 2",
"link": "https://www.google.com"
},
{
"id": 2,
"name": "Item 3",
"link": "https://www.google.com"
},
]
},
computed: {
resultCount() {
return this.data && this.data.length;
},
filteredApps: function () {
if (this.search.trim() === '') {
return this.items;
} else {
return this.items.filter(function (item) {
let self = this;
return item.name.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
});
}
}
},
components: {
ItemCounter
}
});
The strategies I have attempted so far have not been successful. I am encountering errors with the search functionality and unable to display the count. Can someone please point out what I might be missing?