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

Question

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

1. 如果我在Laravel将此卡号，简历，有效期限，金额张贴到末尾，我会得到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的位置。