-
-
Save eminarslan/78001d3968f9baab4791253153dc47b7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="ui cards" style="margin: 10px"> | |
<div class="ui icon input" style="width: 100%"> | |
<input type="text" placeholder="Search..." v-model="searchQuery" /> | |
<i class="search icon"></i> | |
</div> | |
<div | |
class="card ui fluid" | |
v-for="product in searchedProducts" | |
:key="product.id" | |
style="margin: 0" | |
> | |
<div class="content"> | |
<img class="right floated mini ui image" :src="product.imageURL" /> | |
<div class="header">{{ product.title }}</div> | |
<div class="meta"> | |
{{ product.upc }} | {{ product.weight }} Kg | | |
{{ product.itemsperpack }} pack | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
import firebase from "firebase"; | |
import { computed, onMounted, reactive, ref } from "vue"; | |
export default { | |
setup() { | |
const products = reactive([]); | |
const searchQuery = ref(""); | |
const searchedProducts = computed(() => { | |
return products.filter((product) => { | |
return ( | |
product.title | |
.toLowerCase() | |
.indexOf(searchQuery.value.toLowerCase()) != -1 | |
); | |
}); | |
}); | |
onMounted(async () => { | |
try { | |
const productsSnap = await firebase | |
.firestore() | |
.collection("products") | |
.get(); | |
productsSnap.forEach((doc) => { | |
let product = doc.data(); | |
product.id = doc.id; | |
products.push(product); | |
}); | |
} catch (e) { | |
console.log("Error Loading Products"); | |
} | |
}); | |
return { searchedProducts, searchQuery }; | |
}, | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment