<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>
import db from '@/firebase/init'
export default {
name: 'Edit',
data () {
return {
items: [],
item: null,
feedback: null,
search: '',
}
},
created () {
let ref = db.collection('catalog').doc(this.$route.params.slug).collection('item')
ref.get().then(snap => {
snap.forEach(doc => {
let item = doc.data()
item.id = doc.id
this.items.push(item)
})
})
},
methods : {
deleteItem(id){
db.collection('catalog').doc(this.$route.params.slug).collection('item').doc(id).delete()
.then(() => {
this.items = this.items.filter(item => {
return smoothie.id != id
})
}).catch(err => {
console.log(err)
})
},
edit(id){
this.$router.push({ name: 'Editor' , params: {item_id: id}})
},
add(id){
this.$router.push({
name: 'Add'
})
}
},
computed:{
filteredItems: function() {
console.log("Computing..")
try {
return this.items.filter((item) => {
return (item.title.toLowerCase().match(this.search) || item.description.toLowerCase().match(this.search))
})
} catch (error){
return this.items
}
}
}
}
</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.