Vouch Radio Button Field with airSlate SignNow

Vouch radio button field

hi everyone welcome back to the my channel my name is onion and in this view gesture tutorial we will learn that how we can add the checkboxes and radio button in the form so now let's start with the video points these are the six video points here so first of all we are just going to make a component and import it in the view dot JS file then we will add some inputs with checkboxes and radio button also then if you have to define some properties in the phone for the form actually inside the data and some methods also then we have to bind them with the properties input box with the properties then we will submit it alright so now let's start with making a component so let's make a component with the name of let's say I just want to make a signup form so just right here sign up though whew alright and here as you know we have to define the two things one is the template and another is the script tag right and here I will define my component name sign up right so I think I just have to just change them now that's perfect because I is the capital in the sign up alright that's perfect so now let's just add a single input for a moment here like input type text and that's it for a moment and let's import it inside the few file and the app dot you fight is right here import signup from path component and then sign up and now register the sign up component and now we can just use it inside the template all right now let's see what we are getting on a screen we caught the text box that means our component is successfully imported now let's go for the second power white let us define some input points here so first of all I am just going to define to fill for the username then the password and I will just define some hobbies for the checkboxes and radio button for the genders alright so now let's make them just right I have place holder here so I will add the properties of the view GS like we bind after the creating a simple form so just right here and to choose a name or what I just want to add to be a tag also so that we can just maintain some space because yes we can do it with the help of style also but we are focusing on or normal form that's why I just I don't want to waste the time oh no style so just make it a password and just right here and just see here did I save it yeah now we have the two tag boxes here so now let's take a pee tag here inside the P tag just right here hobbies and here I am just going to check box also we find the type of check box and we don't need a placeholder here and we have to define something or like value can be so let's say hope in the hobbies I am just getting like good travel that's okay then we have to add we have to add some more thing like I have to define the ID here so we can also define the same ID like travel that's perfect but as you can see that there is no tag so that we can add label also here just unable and let's close it okay and make it travel here also so this is fine but on a debt click of this text the radio bottom is not changing so I am just going to add here for and it's that o travel so this 4 will be interact with this ID and now it will be just change on a click right that's perfect so I am just going to make a copy of it right so just simply make a copy and just right here sports and we can also put the same ID and text and for etc so let's see yeah the both are working fine now let's make a complete copy of it and let's define random gender and here alright so and here we can also change the values and also this right here male male and male for everywhere now just write your female female in the ID and the value also that's great so here you can see that but we have to change them a radio just rules here radio this right so everything is fine we can select them you can just add the values but here you can see that the both can be selected here but this issue can be resolved with the property binding with the view we will see this in a moment so after that I am just going to define the properties for them so just simply add data function and in the data function just return we can just simply sign up form or something right it will be actually done so that it will just show it should like this now let's define the property like username can be null by default then password can also be null and then hobbies can be array because they are the checkboxes then gender for the radio and they also be null for a by default all right so property is also defined now what I am just going to do I am just going to make a button here and just right here sign and just choose air free on click function and just make a function sign up sign up user alright and let's define this function also for making this function we have to define your mad thirds property and in this methods property let's define this function and for a moment just make a console door phone and just right here hi all right so let's see what we are getting here so wherever okay I will just change it with the BR tag but just see here we got a hi here so the function is working perfectly so and let's add these two yeah tag here also now let's bind the property for the property bind we can just simply use v-model and property name so it can be signup dot choose their name and it can be signup form like this is the sign of one alright so now let's just find this property with every field like this and here we have to use password then we can just find it with a checkboxes and Here I am just going to put here Obie's and similar thing key will be on the sports is right here hobbies and on the checkboxes just simply right here agenda right here gender alright so what I can just print here for getting this value I can just write here this thought signup form and now you can see that we will get the old values first of all let's try to click on it and you will see we got the old values blank here all right there's nothing in this value are even also zero so now like I just want to put in some values like Peter password can be 3 to 1 and have hobby have travel and gender is male and let's click here now the second console you will find that username is here password is here gender is here and the hawk is also here right so let's say just add any female candidate like Kelly password can be like 1 2 3 4 travel have sports and travel both and she is a female and click on it and now you will find that female the both hobbies are selected here username and password alright so thanks watching this video should still have an kind of confusion you can ask me in the comment box don't forget to subscribe my channel and like this video bye bye take care