Vue JS #3 - Use click event, v-if directive and active class

hi everyone my name is Bibek and  this is the third and final episode to create switchable grid using vue js  if you are new to my channel then please don't forget to subscribe and hit the bell  icon so you never miss out my new tutorials in the previous episode we showed dynamic data using axios and we also resolved CORS  issue in the dev environment today we'll work on click event v-if directive  and add active class based on condition so at the moment both grid and list layout are  showing bu

t i just want to show grid layout so open your products component and inside this  data you can add a layout and assign them to grid now in this grid view we need to use v-if  directive saying if the layout is grid so we can add v-if layout equals grid so what this means is the tag will be visible  only if the layout is equal to grid otherwise it will be hidden so likewise let's use  v-if directive for the list view as well so it will be v-if layout  equals to i will call it list now let's chec

k the site and this  time we can only see the grid layout but let's see what happen if  we change this grid into list and this time it is only showing list layout now let's add click event on this button so  that whenever we click on this grid button it should show the grid layout and whenever  we click on this list button it should show the list layout so again you can open your  product component you can change it back to grid you can open this top bar div so here we got our two buttons and to

add the click event you can just  use add click and you can say layout equals grid likewise for the list button you can  use add click equals layout equals list now let's check the site again  and this time if you click on list it is opening the list view and if you click  on grid it is opening the grid view great now let's do one last thing before i conclude this  tutorial and that is to add the active class in this buttons to do that we have to use v-bind  class add active class if the layout

is grid in grid button and list in list button so first let's  find out the class name using the developer tool so our class name is bar active i will copy  this class name and in this grid button i will add v-bind:class you can also use :class and  inside this class i will add the barActive class if the layout is equal to grid likewise in  list button again i will add a v-bind:class and i will add barActive class  if the layout is equal to list now we can remove the static  class name we have

added once done you can check the site again and this time everything  is working perfectly great this is the end of this final session feel free  to comment below if you have any questions also please don't forget to like share and subscribe  to my channel to get more videos in the future thank you so much for choosing my  youtube channel to learn vue js switchable grid i will see you again next  time with the next course if you want some hosting companies you can check the link in the  descrip

tion below thank you and see you soon