Vue 2 Basics #10 - Work on form and handle two way binding

In Web Development

Vue 2 Basics #10 - Work on form and handle two way binding - read the full article about Vue Js update, Web Development and from Code with Bibek on Qualified.One

Share

Tweet

Code with Bibek
Youtube Blogger

hi everyone welcome to my channel code with Bibek  if you want to see my upcoming new tutorials then please subscribe to my channel and hit the bell  icon this is the 10th episode about vue basics in the previous episode we work on events and  today well work on form and handle two-way binding using v model directive first of all  open your text editor and to work on the form were gonna use this product review component  which we had created in our previous session now lets remove this tag and instead lets  add the HTML form which consists of name review rating and submit button then at the bottom  we can add the data for name review and rating now we will use v-model to bind our data into this  input so over here im gonna write v-model name for text area im gonna write v-modul and review  and for select im gonna write v-model and rating lets also add a modifier number so that  it can type us this value as a number check the site now and we can see the  form but it is displaying as a full width it is not displaying inside the container  so you can open our product component you can cut this product review  and paste them inside container check the site again and this  time the form is looking great now lets also test whether our form is working or  not so open your developer tool click on view open your product review component and now you  can add some name you can see the name is working lets add some review ill just add test it is  working as well and finally the rating is working now lets add click event on this submit  button so open your product review component and where it says form you can add add submit  which will pass a method called onsubmit we will add this method after some time but  before that lets add the modifier called prevent this will help to prevent a default behavior  or in other word the page wont refresh when we click on the submit button now lets add  onsubmit method here i will add a variable which contains the object and over here im  gonna add name which will return from our data so it will be this.name for review its gonna be  this.review and for rating it can be this.rating below this im gonna add this.name equals null this.review equals null this.rating equals null i have added this so  that the form get reset when we submit the form also now when we click the  submit button on our form it will create this product review object but  we havent sent it anywhere since its a product review it would be great to show them under  our product component which is our parent as we learned in the previous session we can send the  custom event using this.$emit we call the event review submitted and the value we passed is called product review now open your parent component  which is product.vue and in this product review you can add @review submitted and you  can add the method i will call add review then on the method you can add  addReview we are passing product review and then here we can write this.reviews.push productReview we dont have reviews in our data yet so  here you can add reviews and add empty array so at the moment whenever we submit the review  form the information gets stored in this reviews data to show this information in the template  we can scroll to the top i will just paste my template which is div class reviews it has got  and tag to show the reviews im gonna add I am gonna add v  for and say review in reviews i need the key it will be index so im  gonna modify this code into review and index then inside this tag i  want to show review.review and inside this tag i want to show review.name also in the  same span tag im gonna add the strong ill add the title called rating and  for rating im gonna add review.rating now check your site and fill up this form if you click the submit button we can  see our review over here great but we are still seeing this message we have to show  this message only if there are no review so in this tag you can use  v if and say !reviews.length it is working now if there is no  review then the message is back great this is the end of this session in the next  session we will validate the form feel free to comment below if you have any question  also please dont forget to like share and subscribe to my channel to get more  videos in the future if you want some hosting companies you can check the link in the  description below thank you and see you soon