13FormWithCheckbox&RadioButton.txt

Form With Checkbox & Radio Button
- Make a component and import in App.vue file
- Make input fields
- Add Checkbox and Radio Button
- Define property for form
- Bind input fields with property
- Submit Form

1) Make a component

-src/components/SignUp.vue:
        <template>
            <div>
                <input type="text" placeholder="Enter Your name" v-model="signup.username" /> <br><br>
                <input type="password" placeholder="Enter Your password" v-model="signup.password" /> <br><br>

                <p>Choose Hobbies</p>

                <input type="checkbox" id="cricket" value="cricket" v-model="signup.hobbies" />          // Checkbox
                <label for="cricket">Cricket</label>

                <input type="checkbox" id="football" value="football" v-model="signup.hobbies" />        // Checkbox
                <label for="football">Football</label>

                <br><br>

                <p>Select Gender</p>

                <input type="radio" id="male" value="male" v-model="signup.gender" />          // Radio Button
                <label for="male">Male</label>

                <input type="radio" id="female" value="female" v-mode="signup.gender" />        // Radio Button
                <label for="female">Female</label>

                <br><br>

                <button v-on:click="signupUser">Sign Up</button>                                    // sign up button
            </div>
        </template>

        <script>
        export default {
            name: 'SignUp',
            data(){
                return{
                    signup:{
                        username:null,
                        password:null,
                        hobbies:[],
                        gender:null
                    }
                }
            },
            methods:{
                signupUser(){

                }
            }
        }
        </script>

- Also import this component in App.vue file