42 - Editing Product with Single Modal Window in Vuejs and Firestore

If you want to become a full-stack web developer with JavaScript and Vuejs, I have created this course for you for FREE. You will to Vuejs from scratch and then we will build an E-commerce website with our Vuejs Knowledge. You will learn about Cloud Services like AWS and Firebase.

Also, you will learn how to accept payment with Stripe. Plus much more.

tags:

#Vuejs_Firebase_ECommerce
#vuejs
#firebase
#e-commerce

Vuejs, Learn Vuejs, Vuejs Tutorial, Learn Vue, Vuejs Course, JavaScript, Javascript Course, E-commerce, website, web-hosting, Firebase, AWS, Cloud services, Aws for Developers, Learn Cloud Services, Web Services, Amazon web services, google firebase, javascript framework, vue and firebase, vuejs and aws, vuejs and firebase, Firebase tutorials, Cloud Technolgy, firebase course, aws free course, aws video, learn aws free, web services, cloud, google, amazon, web hosting

[austinsmiht]

I can't thank you enough for your videos. May I ask where you learn all these technologies? And can I donate to you?

[shubhamarora]

Very nice explained by u sir ur tutorials very helpful sir can u please make a project tutorial on angular with firebase backend thanks sir keep up the good work

[botable]

After this video there are a few issues I’m seeing:

1). Delete button no longer works
2.) If you Edit a product, the data is instantly changed whether or not you select “Apply Changes”. That is if you Edit a product, change details and then close the window without saving, the data is still changed.
3.) If you Edit a product and then try to Add a Product, the data is locked on the last item you tried to edit. You can not create a new product at that point.


EDIT: Fixes
1.) in deleteProduct method, change the delete line to:

2.) Warning: This is super hacky and non-ideal atm.


The issue is that in the existing implementation the v-model variables that we modify in the Edit Property modal are tied directly to the actual variables. When you edit them, they are actively being changed instantly. The apply changes button doesn't actually apply anything. For a quick fix, I decided to create a copy by value of the original state of the product when we open it, then create a function that will reset the state if the user selects close. The major limitation is that this ONLY works if the user cancels out pressing the close button, it will not work if the users hit the X button at the top of the window or presses the esc key.


I added an additional property: backup to data()
I then tied the close button to undoChanges with @click
I then created the following method:
undoChanges(){
this.product = $.extend( {}, this.backup );

console.log("I Ran");
},
I also updated the editProduct method:
editProduct(product){
this.modal="edit";
this.product = product;
this.backup = $.extend( {}, product );
$("#product").modal("show");
},
The result is that I create a copy by value of the the product when we open it for an edit.





3.) I created a reset function:
reset(){
this.product = {
name:null,
description:null,
price:null,
tag:null,
image:null
}
},

Then, I call this in the addNew method:
addNew(){
this.modal = "new";
this.reset();
$("#product").modal("show");
},

[umarabbas]

Hello sir, after adding Vue.use(VueFirestore, {
key: 'id', // the name of the property. Default is '.key'.
enumerable: true // whether it is enumerable or not. Default is true.
})

i still have issue while i pass update(this.product.id). i got an error vuewarn called update() with invalid data.
could you please tell the solution.

[edcyt]

we have little problem.after the editing if u want add new product, still have auto fill data || i found one more. If you change the data and press close without saving it, it is still updating

[averyhernandez]

Hello, sir. Will it work even if I didn't use vform? I mean I came rom your other series and on one of my forms, I need to use formData instead. I hopr you can answer me. Thank you sir

[ramranpara]

After adding (this.product.id) in updateProduct() it works but now delete() is not work because is contains doc(['.key']) in give me solution I remove all code of update then delete item is working