<template>
<div class="index container">
<div>
<label for="search">Search </label>
<input type="text" name="search" v-model="search">
</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>
</div>
</template>
<script>
export default {
name: 'Edit',
data () {
return {
items: [{name: "Test", id="fasdfadfcasdfs", description: "hello", location: "hey", cost: "21"}],
item: null,
feedback: null,
search: null
}
},
created () {
},
methods : {
deleteItem(id){
},
edit(id){
this.$router.push({ name: 'Editor' , params: {item_id: id}})
},
add(id){
this.$router.push({
name: 'Add'
})
}
},
computed:{
filteredItems () {
console.log("Computing..")
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()))
})
}
}
}
</script>
<style>
html {
text-align: center;
font-family: 'Karla', sans-serif;
}
</style>
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.