使用 axios 和 vuejs 向 API 发送数据并更新视图

Question

我正在使用 Laravel 和 Vue 来处理 API。我发送表单数据（支付卡详细信息[卡号，cvv，到期日，金额]），过程是这样的：

1. 如果我在 Laravel 中将此卡号、cvv、到期日期、金额发布到末尾，我会收到 200 响应，其中包含交易 ID。

2. 我必须发回与交易 ID 关联的 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 表单以请求用户输入并将其提交给服务器...

希望这是有道理的 - 不要只是复制粘贴，因为我没有测试代码 - 只是快速更改您的...