vue js crud using api

app.vue import AddProduct from './components/AddProduct.vue'; import ShowProduct from './components/ShowProduct.vue'; import EditProduct from './components/EditProduct.vue'; export default{ components:{ AddProduct, ShowProduct, EditProduct }, data(){ return { products:[], categories:[], currentPage:1, pageSize:5, selectedCategory:'', searchQuery:'', searchDescription:'', selectedProduct:null, showAddModal: false, showDetailsModal:false, showEditModal:false, sortBy:'', orderBy:'' }; } , async created(){ try { const response = await fetch('https://fakestoreapi.com/products'); this.products = await response.json(); this.categories=[ ...new Set(this.products.map(product =>product.category))] } catch (error) { console.error(error); } }, watch: { sortBy(newValue) { if (newValue) { this.orderBy = ''; } }, orderBy(newValue) { if (newValue) { this.sortBy = ''; } } }, computed:{ totalPrice(){ return this.filteredProducts.reduce((sum,product) => sum+product.price,0); }, totalPerPage(){ return this.paginatedProducts.reduce((sum,product)=> sum + product.price, 0); }, totalPages(){ return Math.ceil(this.filteredProducts.length/this.pageSize); }, paginatedProducts(){ const start=(this.currentPage-1)*this.pageSize; const end=start+this.pageSize; return this.filteredProducts.slice(start,end) }, filteredProducts(){ let filtered=this.products; if(this.selectedCategory){ filtered=filtered.filter(product=>product.category===this.selectedCategory) } if(this.searchQuery){ filtered=filtered.filter(product=>product.title.toLowerCase().includes(this.searchQuery.toLowerCase())) } if(this.searchDescription){ filtered=filtered.filter(product=>product.description.toLowerCase().includes(this.searchDescription.toLowerCase())) } if(this.sortBy){ filtered=filtered.slice().sort((a,b)=>{ return this.sortBy==='asc' ?a.title.localeCompare(b.title) :b.title.localeCompare(a.title) }) } if(this.orderBy){ filtered=filtered.slice().sort((a,b)=>{ return this.sortBy==='asc' ?a.price-b.price :b.price-a.price; }) } return filtered; } }, methods:{ addProduct(newProduct){ this.products.unshift({id:Date.now(), ...newProduct}); if(!this.categories.includes(newProduct.category)){ this.categories.push(newProduct.category); } this.showAddModal=false; this.currentPage=1; }, showProduct(product){ this.selectedProduct=product; this.showDetailsModal=true; }, editProduct(product){ this.selectedProduct={ ...product}; this.showEditModal=true; }, updateProduct(updatedProduct){ const index=this.products.findIndex(p=>p.id === updatedProduct.id); if(index !== -1){ this.products.splice(index,1,updatedProduct); } this.showEditModal=false; }, deleteProduct(id){ if(confirm("do you want to delete")){ this.products=this.products.filter(product=>product.id!==id) } }, changePage(page){ if(page>=1 && page{ this.product.image = reader.result; }; reader.readAsDataURL(file); } }, submitProduct(){ this.$emit('add-product',{ ...this.product}); this.product={ title:'', price:'', image:'', category:'', }; this.$emit('close'); } } }; add new product X title price category description image add .form-control{ width: 307px; } edit export default{ props:{ showEditModal:Boolean, product: Object, Categories:Array }, data(){ return{ productData:{...this.product} }; }, watch:{ product(newProduct){ this.productData={ ...newProduct}; } }, methods:{ handleFileUpload(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = () => { this.productData.image = reader.result; }; reader.readAsDataURL(file); } }, updateProduct() { this.$emit('update-product', this.productData); }, }}; edit product X title price category description image update show export default{ props: { showDetailsModal: Boolean, product: Object, }, }; product Details X title: {{ product.title }} price: {{ product.price }} category: {{ product.category }} image:

Mar 30, 2025 - 09:21

app.vue
 

  

add



 

 edit
 

 

 

 show