Vue.js - Form

Basic Usage

Refer to this:

v-model will ignore the initial value, checked or selected attributes found on any form elements.

It will always treat the current active instance data as the source of truth.

Input string

Ex:

<input

     id="user-name"

    name="user-name"

     type="text"

    v-model="userName"

/>

Input number

    
Ex:

<input

     id="age"

    name="age"

    type="number"

     v-model="age"

/>

NOTE:

If the input type is number, then v-model will help you to convert it to number automatically.

Dropdown

Refer to this:  

If the initial value of your v-model expression does not match any of the options, the <select> element will render in an "unselected" state.

It is recommended to provide a disabled option with an empty value.

Ex:

<select id="language" name="language" v-model="language">

     <option disabled value="">Please select one</option>

    <option value="en">English</option>

     <option value="fr">French</option>

</select>

Radio

Ex:

<h1>How to commute?</h1>

<div>

     <input

         id="driving"

        name="how-commute"

         type="radio"

         value="driving"

        v-model="howCommute"

     />

    <label for="driving">Driving</label>

</div>

<div>

     <input

         id="transit"

        name="how-commute"

         type="radio"

         value="transit"

        v-model="howCommute"

     />

    <label for="transit">Transit</label>

</div>

NOTE:

We need to add 'value' attribute to the input element.

Then Vue will know what value to put into v-model.

Checkbox

Ex:

<h2>Which instrument do you like?</h2>

<div>

     <input

         id="instrument-piano"

        name="instrument"

         type="checkbox"

         value="piano"

        v-model="instrument"

     />

   <label for="instrument-piano">Piano</label>

</div>

<div>

     <input

         id="instrument-drum"

        name="instrument"

         type="checkbox"

         value="drum"

        v-model="instrument"

     />

    <label for="instrument-drum">Drum</label>

</div>

NOTE:

Like radio box, we need to add 'value' attribute to the input element for checkbox.

Then Vue will know what value to put into v-model.

Single Checkbox

Ex:

<input

    id="agreement"

     name="agreement"

    type="checkbox"

     v-model="agreement"

/>

<label for="agreement">Agree?</label>

Form Validation

You can leave the form validation only when user click submit button.

Or you can use blur event to validate form when the event fire each time.

Ex:

<template>

     <input

         id="user-name"

        name="user-name"

         type="text"

         v-model.trim="userName"

        v-on:blur="validateForm"

    />

     <p v-show="userNameValidity == 'invalid'">

         User Name is not valid

    </p>

</template>

<script>

export default {

     data() {

         return {

             userName: '',

            userNameValidity: 'pending',

         };

    },

     methods: {

         validateForm() {

             if (this.userName) {

                 this.userNameValidity = 'valid';

            } else {

                 this.userNameValidity = 'invalid';

             }

         },

    },

};

</script>

Custom Input Component

Refer to this:

It is normal to build a custom form control as a component to make it reusable.

Vue define a rule to make it possible to use 'v-model' to make it two-way binding with custom form control.

For custom form control:

    Bind the value attribute to the modelValue prop
    On input, emit an update:modelValue event with the new value

For parent component:

    Then parent component can use 'v-model' to bind data to the custom form control.    

Ex:

// DescriptionControl.vue

<template>

    <label for="description">Description</label>

     <input

         id="description"

        name="description"

         type="text"

         v-bind:value="modelValue"

        v-on:input="$emit('update:modelValue', $event.target.value)"

     />

</template>

<script>

export default {

     props: ['modelValue'],

    emits: ['update:modelValue'],

};

</script>

// TheForm.vue

<template>

    <form v-on:submit.prevent="onSubmitBtnClicked">

         <div class="form-control">

             <label for="user-name">Name</label>

             <input

                 id="user-name"

                name="user-name"

                 type="text"

                 v-model.trim="userName"

             />

        </div>

         <div class="form-control">

<!-- Custom Control -->

             <description-control v-model="description"></description-control>

        </div>

         <div>

             <button>Submit Form</button>

        </div>

     </form>

</template>

<script>

import DescriptionControl from './DescriptionControl.vue';

export default {

    components: {

         'description-control': DescriptionControl,

    },

     data() {

         return {

             userName: '',

            description: '',

         };

    },

     methods: {

         onSubmitBtnClicked() {

        },

     },

};

</script>