Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
14 Aug
2021

Implementing Toggle Switch in Vue js using vue-js-toggle-button

by Shubham Batra

2782

vue-js-toggle-button -

It is a npm package available for implementing toggle buttons. For installing this package you have to follow these steps:-

Step 1:-

First of all you have to install npm package using 


npm i vue-js-toggle-button

After you execute this command in the terminal, vue js toggle button package will be installed in your project. After it is completed we will move to second stop of importing the package and using in the component.

Step-2:-

So after the package is installed, you have to go to the main.js in your vue application and add these lines

import ToggleButton from 'vue-js-toggle-button'
  
Vue.use(ToggleButton)

Now , after adding these lines your vue application is ready to use vue-js-toggle-button. So now you have to go to the component where you want to add that toggle button.And add this line to your html.


<toggle-button @change="checkData($event )" :value="Boolean(tr.isActive)" :labels="{checked: 'Yes', unchecked: 'No'}" style="margin-left: 20px" />

Now  talking about this line, we are creating a toggle button and checkData($event)  will be a method where we will capture the toggle button value on change.So you have to add this in your methods

	methods: {	 
	     checkData( event) {
      let value = event.value; /*will return true or false*/
  
		    },
		}

So , this is how you can get the data of your toggle button .For setting the data we have used this. You have to pass true or false to set the value.  

:value="Boolean(tr.isActive)"

So this is how we can implement toggle button in our application. This will be the output

  • |
  • vue js toggle button , vue js , toggle buttons , vuejs , vue js toggle switch

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier