Vuejs2 如何从在vue2中添加条带元素？

在Laravel 5.8/vuejs 2.6/vuex/mysql应用程序中，我需要从中添加条带元素，

为此，我在参考资料/views/index.blade.php中添加了一行：

@include('footer')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('js/waves.min.js') }}"></script>
<script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('js/powerange.js') }}"></script>
<script src="{{ asset('js/appInit.js') }}"></script>
<script src="{{ asset('js/app.js') }}{{  "?dt=".time()  }}"></script>

<script src="https://js.stripe.com/v3/"></script>

</html>

@include（'footer'））

在我的vue表单中，我在initStripe（）方法中初始化stripe，该方法在装载事件中调用：

<template>

    <div class="page-content col-md-offset-2">

        <div class="sign-up container-fluid justify-content-center" style="max-width: 460px;">
                        <hr>
                        <hr>
                        <form action="/charge" method="post" id="payment-form">
                            <div class="form-row">
                                <label for="card-element">
                                    Credit or debit card
                                </label>
                                <div id="card-element">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>

                                <!-- Used to display form errors. -->
                                <div id="card-errors" role="alert"></div>
                            </div>

                            <button>Submit Payment</button>
                        </form>

                        <button type="button"
                                class="btn btn-outline-pink btn-round waves-effect waves-light cancel-btn mr-5" @click.prevent="cancelSelectedSubscription()">
                            <i :class="getHeaderIcon('cancel')"></i> Cancel
                        </button>


        </div>
    </div>


</template>


<script>
    import {bus} from '../../../../app';
    import appMixin from '../../../../appMixin';

    import Vue from 'vue';

    export default {
        data: function () {
            return {
                is_page_loaded: false,

            }

        },
        name: 'selectedSubscription',

        created() {

            if ( typeof this.currentLoggedUser.id != 'number' ) {
                this.showPopupMessage("Access", 'Your session is expired !', 'error');
                this.$store.commit('logout');
            }

            this.message = '';

        }, //  created) {

        mounted() {
            this.is_page_loaded = true
            this.setAppTitle("Selected Subscription", 'Selected Subscription Details', bus);
            this.initStripe();
        }, // mounted() {


        mixins: [appMixin],

        methods: {


            cancelSelectedSubscription() {
                this.$router.push({path: '/personal-details'});
            },

            initStripe()
            {

                console.log("Stripe -1::")

                // Create a Stripe client.
                var stripe = Stripe('pk_test_NNNN');
                console.log("Stripe -2::")

                // Create an instance of Elements.
                var elements = stripe.elements();
                console.log("Stripe -3::")

                // Custom styling can be passed to options when creating an Element.
                // (Note that this demo uses a wider set of styles than the guide below.)
                var style = {
                    base: {
                        color: '#32325d',
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#aab7c4'
                        }
                    },
                    invalid: {
                        color: '#fa755a',
                        iconColor: '#fa755a'
                    }
                };

                // Create an instance of the card Element.
                var card = elements.create('card', {style: style});
                console.log("Stripe -4::")

                // Add an instance of the card Element into the `card-element` <div>.
                card.mount('#card-element');

                // Handle real-time validation errors from the card Element.
                card.addEventListener('change', function (event) {
                    var displayError = document.getElementById('card-errors');
                    if (event.error) {
                        displayError.textContent = event.error.message;
                    } else {
                        displayError.textContent = '';
                    }
                });
                console.log("Stripe -5::")

                // Handle form submission.
                var form = document.getElementById('payment-form');
                form.addEventListener('submit', function (event) {
                    event.preventDefault();

                    stripe.createToken(card).then(function (result) {
                        if (result.error) {
                            // Inform the user if there was an error.
                            var errorElement = document.getElementById('card-errors');
                            errorElement.textContent = result.error.message;
                        } else {
                            // Send the token to your server.
                            this.stripeTokenHandler(result.token);
                        }
                    });
                });

            }, // initStripe() {


            // Submit the form with the token ID.
            stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                var form = document.getElementById('payment-form');
                alert( "stripeTokenHandler form::"+var_dump(form) )
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);

                // Submit the form
                form.submit();
            },

        }, // methods: {

        computed: {
            currentLoggedUser() {
                return this.$store.getters.currentLoggedUser;
            },
            ...
        } //computed: {

    }


</script>

<style lang="css">

    /**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
    .StripeElement {
        box-sizing: border-box;

        height: 40px;

        padding: 10px 12px;

        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;

        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

</style>

信用卡还是借记卡
付款
取消
从“../../../../app”导入{bus}；
从“../../../../appMixin”导入appMixin；
从“Vue”导入Vue；
导出默认值{
数据：函数（）{
返回{
是否加载页面：false，
}
},
名称：“selectedSubscription”，
创建（）{
if（this.currentLoggedUser.id的类型！=“number”）{
this.showPopupMessage（“访问”，“您的会话已过期！”，“错误”）；
此.store.commit（'logout'）；
}
this.message=''；
}，//已创建）{
安装的（）{
this.is_page_loaded=true
此.setAppTitle（“选定订阅”，“选定订阅详细信息”，总线）；
this.initStripe（）；
}，//mounted（）{
mixin:[appMixin]，
方法：{
cancelSelectedSubscription（）{
这是.$router.push（{path:'/personal details'}）；
},
initStripe（）
{
log（“条带-1:：”）
//创建条带客户端。
变量条带=条带（'pk_test_NNNN'）；
log（“条带-2:：”）
//创建元素的实例。
var elements=stripe.elements（）；
log（“条带-3:：”）
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
变量样式={
基数：{
颜色：“#32325d”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色：“#aab7c4”
}
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”
}
};
//创建卡元素的实例。
var card=elements.create（'card'，{style:style}）；
log（“条带-4:：”）
//将card元素的实例添加到“card元素”中。
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
var displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
log（“条带-5:：”）
//处理表格提交。
var form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
var errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器。
this.stripeTokenHandler（result.token）；
}
});
});
}，//initStripe（）{
//提交带有令牌ID的表单。
stripeTokenHandler（令牌）{
//将令牌ID插入表单，以便将其提交到服务器
var form=document.getElementById（'payment-form'）；
警报（“stripeTokenHandler表单：：”+var_转储（表单））
var hiddenInput=document.createElement（'input'）；
setAttribute（'type'，'hidden'）；
setAttribute（'name'，'stripeToken'）；
hiddenInput.setAttribute（'value'，token.id）；
表格.appendChild（hiddenInput）；
//提交表格
表单提交（）；
},
}，//方法：{
计算：{
currentLoggedUser（）{
返回此。$store.getters.currentLoggedUser；
},
...
}//计算：{
}
/**
*此处显示的CSS将不会在《快速入门指南》中介绍，而是显示
*如何使用CSS设置元素容器的样式。
*/
.条纹元素{
框大小：边框框；
高度：40px；
填充：10px 12px；
边框：1px实心透明；
边界半径：4px；
背景色：白色；
盒影：0 1px 3px 0#e6ebf1；
-webkit过渡：盒影150ms轻松；
    <div id="card-element">
        <!-- A Stripe Element will be inserted here. -->
   </div>

#card-element {
    line-height: 1.5rem;
    margin: 10px;
    padding: 10px;
}
.__PrivateStripeElement {
    min-width: 300px !important;
    min-height: 40px !important;
    color: $text_color;
}