Javascript 是否在Vue.js中添加外部处理的元素？

我发现很多库以某种方式将外部库（及其DOM元素）与Vue.js结合在一起。不过，它们似乎都只是将子元素添加到Vue.js管理的DOM节点

我写这篇文章是为了让新的Stripe V3的使用变得更简单，但很难将Stripes元素安装到Vue组件上

最明显的方法是使用

.vue

组件，如下所示：

<template>
</template>

<script>
export default {
  // could also be `mounted()`
  beforeMount () {
    const el = Stripe.elements.create('card')
    el.mount(this.$el)
  }
}
</script>

这是可行的，但感觉就像我在与Vue.js对抗一样，我可能会在这里产生奇怪的副作用。或者我只是在做其他附加库手工做的事情，这是最好的方法

有没有“官方”的方法来做到这一点？

提前感谢您对它的任何有用评论。

Stripe Elements Vuejs 2 使用refs获取vuejs中的DOM元素

HTML

<div ref="cardElement"></div>

---

我也遇到了同样的问题，所以挂载的方法可以正确添加，但是对于调用特定vuejs的大型应用程序，我遇到了错误 “请确保您尝试使用的元素仍已装入。”

HTML代码段：

 <div style="min-height:100px;">
                                            <div class="group">
                                                <h4><span class="label label-default"> Enter Card Details</span> </h4>
                                                <label class="cardlabel">
                                                    <span>Card number</span>
                                                    <div id="card-number-element" class="field"></div>
                                                    <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
                                                </label>
                                                <label class="cardlabel">
                                                    <span>Expiry date</span>
                                                    <div id="card-expiry-element" class="field"></div>
                                                </label>
                                                <label class="cardlabel">
                                                    <span>CVC</span>
                                                    <div id="card-cvc-element" class="field"></div>
                                                </label>
                                            </div>
                                        </div>

mounted() {
    const stripe = Stripe('pk');
    const elements = stripe.elements();
    const card = elements.create('card');
    card.mount(this.$refs.cardElement);
}

 <div style="min-height:100px;">
                                            <div class="group">
                                                <h4><span class="label label-default"> Enter Card Details</span> </h4>
                                                <label class="cardlabel">
                                                    <span>Card number</span>
                                                    <div id="card-number-element" class="field"></div>
                                                    <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
                                                </label>
                                                <label class="cardlabel">
                                                    <span>Expiry date</span>
                                                    <div id="card-expiry-element" class="field"></div>
                                                </label>
                                                <label class="cardlabel">
                                                    <span>CVC</span>
                                                    <div id="card-cvc-element" class="field"></div>
                                                </label>
                                            </div>
                                        </div>

    (function () {

        let stripe = Stripe('keyhere');
        elements = stripe.elements(),
        cardNumberElementStripe = undefined;
        cardExpiryElementStripe = undefined;
        cardCvcElementStripe = undefined;
        var style = {
            base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '15px',

                '::placeholder': {
                    color: '#CFD7E0',
                },
            },
        };
            var purchase= new Vue({
                el: '#purchase',
                mounted() {

                    cardNumberElementStripe = elements.create('cardNumber', {
                        style: style
                    });

                    cardExpiryElementStripe = elements.create('cardExpiry', {
                        style: style
                    });
                    cardCvcElementStripe = elements.create('cardCvc', {
                        style: style
                    });
                    cardNumberElementStripe.mount('#card-number-element');
                    cardExpiryElementStripe.mount('#card-expiry-element');
                    cardCvcElementStripe.mount('#card-cvc-element');

                    cardNumberElementStripe.on('change', function (event) {
                        // Switch brand logo
                        if (event.brand) {
                            if (event.error) { setBrandIcon("unknown"); } else { setBrandIcon(event.brand); }
                        }

                        //setOutcome(event);
                    });
                    function setBrandIcon(brand) {
                        var brandIconElement = document.getElementById('brand-icon');
                        var pfClass = 'pf-credit-card';
                        if (brand in cardBrandToPfClass) {
                            pfClass = cardBrandToPfClass[brand];
                        }
                        for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
                            brandIconElement.classList.remove(brandIconElement.classList[i]);
                        }
                        brandIconElement.classList.add('pf');
                        brandIconElement.classList.add(pfClass);
                    }
                    var cardBrandToPfClass = {
                        'visa': 'pf-visa',
                        'mastercard': 'pf-mastercard',
                        'amex': 'pf-american-express',
                        'discover': 'pf-discover',
                        'diners': 'pf-diners',
                        'jcb': 'pf-jcb',
                        'unknown': 'pf-credit-card',
                    }



                },
            created() {
      //on the buttn click u are calling this using v-on:click.prevent="payment" 

  payment: function (e) {


                    stripe.createToken(cardNumberElementStripe).then(function (result) {
                        debugger;
                      if (result.token) {
                            cardId = result.token.id;
                           // $("#paymentform").get(0).submit();
                            } else if (result.error) {
                            errorElement.textContent = result.error.message;

                            return;
                        }
                    });
                }        
}