Tek Shinobi

We have been building Currency Converter using Vue.js. In the part-1 we built the basic layout of the app with navbar. In this tutorial we will setup a form with validation.

The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for this tutorial, please refer to commit branch “part-2”.

For validation, we will use vee-validate. There is some validation baked into Vuetify v-form (will talk about it shortly) itself but it will be nice to use a dedicated library for validation since it offers more avenues for customization.

so, in the console, say:
npm install vee-validate --save

Ok, so now we create a brand new component Content.vue. So create this file in src/components. Lets add some dummy code in it so we can wire it up in the Home.vue view.

<template>
 <article> Content</article>
</template>

Now wire it up in the Home.vue like so:

<template>
  <div class="home">
    <Content/>
  </div>
</template>

<script>
// @ is an alias to /src
import Content from '@/components/Content.vue'
export default {
  name: 'home',
  components: {
    Content
  }
}
</script>

You can fire up the development server to see if everything is hooked up correctly.

Now lets start fleshing out the form in Content.vue.

We need a place to put the form. Hence v-card. The form in vuetify is called v-form. It goes in the v-card-text part. The submit button will go in the v-card-actions part.

Since the forms fields sit in a grid, we have the v-container holding the grid of v-row and v-col.

We then also add vee-validate validation around form fields. Important point to remember, v-slot is fed an object. Here we call it “v”. You can call it whatever. This object holds the errors object that will contain all the validation errors. Note that the errors object is an array (v.errors[0]). This is because a form field can have multiple validations on it, like here we have both required and positive. So the validation errors are more than one (two in this case, one for required and another for positive). We can show all validation errors for a form field in one go (with a v-for) or, as in this case, we show one by one using v.errors[0].

Thats it. Here’s how the final code looks like.

<template>
    <article>
        <v-card class="mt-3">
            <v-card-title class="mb-0 pb-0 pl-7">Currency</v-card-title>
            <v-card-text class="mb-0 pb-0">
                <v-form>
                    <v-container fluid class="mb-0 pb-0">
                        <v-row>
                            <v-col cols="12" md="6">
                                <v-row>
                                    <v-col cols="3">
                                        <v-select
                                            :items="from_cur"
                                            label="From"
                                            outlined
                                        ></v-select>
                                    </v-col>
                                    <v-col cols="9">
                                        <ValidationProvider name="currency-value" rules="required|positive" v-slot="v">
                                            <v-text-field v-model="from_amt" autofocus></v-text-field>
                                            <span class="red--text">{{v.errors[0]}}</span>
                                        </ValidationProvider>
                                    </v-col>
                                </v-row>
                            </v-col>
                            <v-col cols="12" md="6">
                                <v-row>
                                    <v-col cols="3">
                                        <v-select
                                            :items="to_cur"
                                            label="To"
                                            outlined
                                        ></v-select>
                                    </v-col>
                                    <v-col cols="9">
                                        <div>
                                            <span class="grey--text">{{to_amt}}</span>
                                        </div>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-container>
                    
                </v-form>
            </v-card-text>
            <v-card-actions>
                <v-btn class="ma-3" dark color="green">Convert</v-btn>
                <button @click="alertSimpleInput1">Show from amt</button>
            </v-card-actions>
        </v-card>        
    </article>
</template>

<script>
import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'This field is required'
});

extend('positive', {
  validate(value) {
    return value >= 0;
  },
  message: 'The {_field_} field must have positive value'
});

export default {
    components: {
        ValidationProvider
    },
    data(){
        return {
            from_cur:['USD', 'EUR', 'INR', 'AUD', 'GBP'],
            to_cur:['USD', 'EUR', 'INR', 'AUD', 'GBP'],
            from_amt:'',
            to_amt:''
        }
    },
    methods:{
        alertSimpleInput1(){
            alert(this.from_amt)
        },
    }
};
</script>

I have put a button Show from amt for debugging. Very standard javascript stuff. It will be removed in the production code.