Computed parameter vuejs issue

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.