vue credit card component

Question

I am trying to use https://github.com/thiago-Malaca/vue-credit-card for displaying card information. But I couldn't convert card when cvc information focused. Are there anybody who can help me. I reviewed directives, but I am missing something. I tried to add v-card-focus directive to input areas, but it is not working for me.

Also, it is my code: I can supply extra information, too. Thank you.

<template>
<div class="card mb-5 mb-lg-0 p-2">
<div class="card-body">
    <card :value="{number, name, expiry, cvc}"></card>
    <v-form>
        <v-container fluid>
            <v-layout>
                <v-flex xs24>
                    <v-text-field v-model="name"  :rules="nameRules" label="İsim Soyisim" required></v-text-field>
                </v-flex>
            </v-layout>
            <v-layout>
                <v-flex xs12>
                    <v-text-field v-model="number" :rules="cardRules" label="Kart Numarası" required>
                    </v-text-field>
                </v-flex>
            </v-layout>
            <v-layout>
                <v-flex xs12>
                    <v-text-field v-model="expiry" :rules="expiryRules" label="Son Kullanma Tarihi" required></v-text-field>
                </v-flex>

                <v-flex xs12>
                    <v-text-field v-model="cvc" :rules="cvcRules" label="cvc" name="cvc" required></v-text-field>
                </v-flex>
            </v-layout>
        </v-container>
    </v-form>
</div>

<script>
import Card from 'vue-credit-card';

export default {
    name: 'CheckoutForm',
    data () {
    return {
        number : '',
        name : '',
        expiry : '',
        cvc : '',
        nameRules: [
            v => !!v || 'Lütfen adınızı ve soyadınızı giriniz.',
            v => v.length > 3 || 'En az 3 karakter uzunluğunda olmalıdır.'
        ],
        cardRules: [
            v => !!v || 'Lütfen Kart Numarasını giriniz.',
            v => v.length > 15 || 'En az 15 karakter uzunluğunda olmalıdır.'
        ],
        expiryRules: [
            v => !!v || 'Lütfen kartınıza ait son kullanma tarihini giriniz.',
            v => v.length > 4 || 'En az 4 karakter uzunluğunda olmalıdır.'
        ],
        cvcRules: [
            v => !!v || 'Lütfen kartınızın arkasında bulunan CVC numarasını giriniz.',
            v => v.length > 3 || 'En az 4 karakter uzunluğunda olmalıdır.'
        ],
        focused : 'false'

    }
},
components: {
    Card
},
methods: {
    isFocused () {
        return this.focused;
    }
}
}

</script>

Answer 1

I found problem. We should add directive to cvc named input. But, when we add v-card-focus on v-text-field, vuetify is not adding this directive to input area.

I couldn't find a way for using it with vuetify, if you found anyway, please add your answer.

Thank you.