Creating Switchable Grid using Vue JS

In this tutorial, Bibek demonstrates how to create a switchable grid using Vue JS. He first introduces himself and mentions that this is the third and final episode on this topic. He encourages new viewers to subscribe to his channel.

In the previous episode, Bibek showed how to use dynamic data using axios and resolved the CORS issue. In this episode, he focuses on the click event and v-if directive. He wants to add an active class based on the layout condition.

To show only the grid layout, he suggests modifying the 'layout' data to 'grid'. Using the v-if directive, he hides the 'ul' tag if the layout is not equal to grid. Similarly, he adds the v-if directive for the list view.

To enable switching between grid and list layouts, Bibek adds click events to the buttons. Clicking on the grid button shows the grid layout, while clicking on the list button shows the list layout.

Lastly, Bibek adds the active class to the buttons. Using v-bind:class, he includes the 'barActive' class if the layout matches either grid or list.

In conclusion, Bibek invites viewers to comment and subscribe to his channel. He thanks them for choosing his channel to learn Vue JS and mentions that he will be back with more courses in the future.

video txt