在vuejs中传递道具数据

Question

我正在尝试在 VUE Js 上构建一个小型电子商务项目，我在其中通过支付网关进行集成，第三方供应商给了我一个校验和函数，该函数用于获取价值和应该从 HTML 表单传递，所以我有一个函数，它获取所有必要的变量并通过道具传递给不同组件中的其他表单。

所以我的代码看起来像：

checkout() {
    var paramarray = {};
    paramarray['MID'] = MID; //Provided by Paytm
    paramarray['ORDER_ID'] = 'ORDER070913489845456'; //unique OrderId for every request
    paramarray['CUST_ID'] = 'CUST000145';  // unique customer identifier
    paramarray['INDUSTRY_TYPE_ID'] = INDUSTRY_TYPE_ID; //Provided by Paytm
    paramarray['CHANNEL_ID'] = CHANNEL_ID; //Provided by Paytm
    paramarray['TXN_AMOUNT'] = '1.00'; // transaction amount
    paramarray['WEBSITE'] = WEBSITE; //Provided by Paytm
    paramarray['CALLBACK_URL'] = 'https://www.paytm.com';//Provided by Paytm
    paramarray['EMAIL'] = 'abc@gmail.com'; // customer email id
    paramarray['MOBILE_NO'] = '9999999999'; // customer 10 digit mobile no.

    var PAYTM_MERCHANT_KEY = '&uuClCjORCw3UW'

    checksum.genchecksum(paramarray, PAYTM_MERCHANT_KEY, function(err, result) {});

    this.$router.push({name: 'payPaytm', params: { transData: paramarray}});
}

在路由器中我有定义：

{
    path: '/pay-paytm',
    component: Vue.component('payPaytm', require('../Payment/Paytm/Views/Redirect.vue')),
    name: 'payPaytm',
    props: true
},

在我传递这些数据的组件中：

<template>
    <div>
        <h1>Please do not refresh this page...</h1>

        <form method="post" action="https://pguat.paytm.com/oltp-web/processTransaction" name="f1">
            <input name="MID" type="hidden" :value="transData.MID" />
            <input name="ORDER_ID" type="hidden" :value="transData.ORDER_ID" />
            <input name="CUST_ID" type="hidden" :value="transData.CUST_ID" />
            <input name="TXN_AMOUNT" type="hidden" :value="transData.TXN_AMOUNT" />
            <input name="CHANNEL_ID" type="hidden" :value="transData.CHANNEL_ID" />
            <input name="EMAIL" type="hidden" :value="transData.EMAIL" />
            <input name="MOBILE_NO" type="hidden" :value="transData.MOBILE_NO" />
            <input name="INDUSTRY_TYPE_ID" type="hidden" :value="transData.INDUSTRY_TYPE_ID" />
            <input name="WEBSITE" type="hidden" :value="transData.WEBSITE" />
            <input name="CALLBACK_URL" type="hidden" :value="transData.CALLBACK_URL" />
            <input name="CHECKSUMHASH" type="hidden" :value="transData.CHECKSUMHASH"/>
            <button class="thm-btn bgclr-1" data-loading-text="Please wait...">Submit</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "redirect",
        props: {
            transData: {
                required: true
            }
        },
        created() {
            console.log(this.transData)
        }
    }
</script>

当我尝试使用控制台时，我可以看到以下内容：

但是当我看到正在添加的元素时，它没有选择输入表单中的 CHECKSUMHASH 键

我不知道为什么我从所有变量绑定的 props 组件中安慰这个元素，只有这个 chechsumash 键没有得到值。帮我解决这个问题。

Answer 1

可能是因为 checksum.genchecksum 是一个异步函数。你这样试过吗？

checksum.genchecksum(paramarray, PAYTM_MERCHANT_KEY, (err, result) => {

    this.$router.push({name: 'payPaytm', params: { transData: paramarray}});

});

在vuejs中传递道具数据

Passing props data in vuejs

javascript

vue.js

vue-router

vuejs2