외부에서 처리되는 요소를 Vue.js에 추가하시겠습니까?

외부에서 처리되는 요소를 Vue.js에 추가하시겠습니까?

외부 라이브러리(및 그 DOM 요소)와 Vue.js를 조합한 라이브러리를 많이 찾았습니다.그러나 모두 Vue.js 관리 DOM 노드에 하위 요소만 추가하는 것으로 보입니다.

새로운 Stripe V3를 사용하기 쉽게 하기 위해 Vue-Stripe-Elements를 작성했지만 Stripes 요소를 Vue 컴포넌트에 마운트하는 데 어려움을 겪었습니다.

확실한 방법은.vue컴포넌트는 다음과 같습니다.

<template>
</template>

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

이 방법은 스트라이프가 마운트된 요소에 하위 항목만 추가하는 경우 작동하지만 스트라이프가 지정된 DOM 노드를 대체하거나 대신하는 것처럼 보입니다.물론 스트라이프도 지원하지 않습니다.VNodes.

현재 이 문제에 대한 해결책은 실제 DOM 노드를 생성하여 자식으로 추가하는 것입니다.

<template>
</template>

<script>
export default {
  mounted () {
    const dom_node = document.createElement('div')
    const el = Stripe.elements.create('card')
    el.mount(dom_node)
    this.$el.appendChild(el)
  }
}
</script>

효과가 있는데 Vue.js와 싸우는 것 같아서 이상한 부작용이 생길 수도 있어요.아니면 다른 추가 라이브러리가 수동으로 수행하는 것이 최선의 방법일까요?

이것을 "공식적인" 방법이 있나요?

그것에 대해 도움이 되는 코멘트를 해주셔서 감사합니다.

스트라이프 요소 Vuej 2

참조를 사용하여 vuej의 DOM 요소를 가져옵니다.

HTML

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

JS

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

같은 문제에 직면했기 때문에 마운트된 메서드는 올바르게 추가할 수 있지만 특정 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>

Vue.js

    (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;
                        }
                    });
                }        
}

언급URL : https://stackoverflow.com/questions/42487688/adding-externally-handled-elements-in-vue-js