The following is my layout (in <template>).
<label for="search">Search </label>
<input type="text" name="search" v-model="search">
<p v-if="feedback" class="red-text">{{feedback}}</p>
</div>
<div class="card" v-for="item in filteredItems" :key="item.id">
<div class="card-content">
<img class="left" :src="item.image+'=s128'">
<h2>{{item.name}}</h2>
<i class="material-icons delete" @click="deleteItem(item.id)">delete</i>
<p>{{item.description}}</p>
<i><p>Located in: {{item.location}}</p></i>
<h3>${{item.cost}}</h3>
<button class="btn-floating btn-large halfway-fab red" @click="edit(item.id)"><i class="material-icons edit">edit</i></button>
</div>
</div>
<div class="fixed-action-btn" @click="add()">
<a class="btn-floating btn-large red">
<i class="large material-icons">add</i>
</a>
</div>
The following is my Computed parameter.
computed:{
filteredItems: function () {
console.log("Computing..")
try {
this.feedback = null
return this.items.filter((item) => {
console.log((item.title.toLowerCase().match(this.search.toLowerCase()) || item.description.toLowerCase().match(this.search.toLowerCase())))
return (item.title.toLowerCase().match(this.search.toLowerCase()) || item.description.toLowerCase().match(this.search.toLowerCase()))
})
} catch(error) {
this.feedback = "An error occured during search. Please reload the page."
}
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.