Skip to content

Instantly share code, notes, and snippets.

@softauthor
Created March 11, 2021 00:32
Show Gist options
  • Save softauthor/da2fe6f9b5e060861ef9e86c65d78798 to your computer and use it in GitHub Desktop.
Save softauthor/da2fe6f9b5e060861ef9e86c65d78798 to your computer and use it in GitHub Desktop.
<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>
@sarojbelbase
Copy link

sarojbelbase commented Mar 12, 2021

hey man, can you also add the style part? I tried working out with my styles but I found your style looked way cooler, many thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment