15FormValidation.txt

Make a component and import in App.vue
Make some fields
Make function for submit a function
Add error validation

1) Make a component

- src/components/Login.vue:
        <template>
            <div>
                <p v-if="error.length">
                    <b>Please correct the following errors</b>
                    <ul>
                        <li v-for="e in error" v-bind:key="e.id">{{e}}</li>
                    </ul>
                </p>
                <form @submit="login">
                    <input type="text" placeholder="enter name" v-model="name" /> <br><br>
                    <input type="password" placeholder="enter password" v-model="password" /> <br><br>
                    <button v-on:click="loginData" type="submit">Login</button>
                </form>
            </div>
        </template>

        <script>
        export default {
            name: 'Login',
            data(){
                return{
                    error:[],
                    username:null,
                    password:null,
                }
            },
            methods:{
                login(e){ 
                    this.error=[];
                    if(this.name && this.password)
                    {
                        console.warn("No error")
                    }
                    if(!this.name)
                    {
                        this.error.push("Name is required")
                    } 
                    if(!this.password)
                    {
                        this.error.push("Password is required")
                    } 
                    console.warn("Hello",this.error)
                    e.preventDefault();
                }
            }
        }

- import this component in App.vue