Отправка данных в API с помощью axios и vuejs и обновление представления

Question

Я использую Laravel и Vue для работы с API.Я отправляю данные формы (данные карты для оплаты [номер карты, cvv, срок действия, сумма]), и процесс выглядит так:

1. Если я отправлю в Laravel конец этой картычисло, cvv, дата истечения срока действия, сумма, я получаю ответ 200, который включает идентификатор транзакции.

2. Я должен отправить обратно OTP (одноразовый пароль), связанный с идентификатором транзакции, этотребует обновить представление в Laravel и предоставить поле для отправки OTP, чтобы платеж был завершен.

new Vue({
    el: '#app',
    data() {
        return {
            cardnumber: '',
            cvv: '',
            expirymonth: '',
            expiryyear: '',
            amount: ''
        }
    },
    methods: {
        updateView() {
            console.log("Update View");
            $("#app").hide();
        },
        onSubmit() {
            axios.post('/process', this.$data).then(response => {
                if (response.data.code == 200) {
                    let transactionid = response.data.transactionid;
                    console.log("Successfull. Txn ID: " + transactionid);
                    // Send OTP and transaction ID

                    axios.post('/process', {
                        PIN: "12345",
                        transactionid: transactionid
                    })
                        .then(response => console.log("Sending PIN"))
                        .catch(err => console.log("Error Sending PIN: " + err))
                }
            }).catch(err => console.log(err))
        }
    }
});

В строке 26 я хочу обновить представление ипозвольте пользователю предоставить OTP.

Answer 1

Поскольку вам необходимо дополнительное взаимодействие с пользователем, я полагаю, вам следует добавить атрибут данных, который позволит вам отслеживать шаг, на котором вы находитесь ...

Может быть, это поможет вам ...

new Vue({
el: '#app',
data() {
    return {
        step: 'init',
        txdetails: {
            cardnumber: '',
            cvv: '',
            expirymonth: '',
            expiryyear: '',
            amount: ''
        },
        transactionid: null,
        otp: null
    }
},
methods: {
    updateView() {
        console.log("Update View");
        $("#app").hide();
    },
    onSubmit() {
        switch(this.data.switch) {
            case 'init':  
                this.submitInit();
                break;
            case 'otp':
                this.submitOtp();
                break;
        }
    },
    submitInit() {
        axios.post('/process', this.data.txdetails).then(response => {
            if (response.data.code == 200) {
                this.transactionid = response.data.transactionid;
                this.step = 'otp';
            }
        }).catch(err => console.log(err))
    },
    submitOtp() {
        axios.post('/process', {
                    PIN: this.otp,
                    transactionid: this.transactionid
                })
                    .then(response => console.log("Sending PIN"))
                    .catch(err => console.log("Error Sending PIN: " + err));


    }
});

затем вы можете использовать

<div v-if="step == 'init'">Show initial form here</div>
<div v-else>Show OTP form here</div>

для условного отображения начальной формы или формы OTP для запроса ввода пользователя и отправки его на сервер ...

Надеюсь, это имеет смысл - не просто скопируйте вставку, поскольку я не тестировал код - просто быстро изменил ваш ...