Question

我正在尝试使用https://github.com/thiago-Malaca/vue-credit-card来显示卡信息。但是当cvc信息集中时，我无法转换卡。有谁能帮助我。我检查了指令，但是缺少了一些东西。我试图将v-card-focus指令添加到输入区域，但是它对我不起作用。

这也是我的代码：我也可以提供其他信息。谢谢。

<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

我发现了问题。我们应该在cvc命名输入中添加指令。但是，当我们在v-text-field上添加v-card-focus时，vuetify不会将此指令添加到输入区域。

我找不到将其与vuetify结合使用的方法，如果您仍然找到了，请添加答案。

谢谢。

Vue信用卡组件

1 个答案: