0

我正在尝试使用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>
4

1 回答 1

0

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

我找不到将它与 vuetify 一起使用的方法，如果您还是找到了，请添加您的答案。

谢谢你。

于 2019-06-29T11:11:20.680 回答