javascript - 在 vuejs 中传递 props 数据

问题描述

我正在尝试在我通过支付网关进行集成的地方构建一个小型电子商务项目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键没有得到值。帮我解决这个问题。

标签： javascriptvue.jsvuejs2vue-router

javascript - 在 vuejs 中传递 props 数据

问题描述

解决方案

推荐阅读