Vue.jsで外部処理要素を追加していますか？

Question

Vue.jsで何とか外部ライブラリ（とそのDOM要素）と結婚するライブラリがたくさん見つかりました。それらのすべてはだけで、Vue.jsが管理するDOMノードに子要素を追加するようです。

私はVue-Stripe-Elementsを書いて新しいStripe V3を使いやすくしましたが、Stripes要素をVueコンポーネントにマウントするのに苦労しました。ストライプが唯一それがあまりにも搭載されている要素に子を追加しますが、それはストライプの代わりにtranscludesのように見えるか、与えられたDOMノードを置き換える場合、これは動作します

<template> 
</template> 

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

：

明白な方法は、このような.vueコンポーネントになります。ストライプはもちろん、VNodeもサポートしていません。

問題への私の現在のソリューションは、実際の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と戦ってるように感じていると私は作成することがあります奇妙な副作用がここにある。それとも、私はちょうどのライブラリを追加してライブラリを手動で実行するのですか？これは最善の方法ですか？

これを行うには "正式な"方法はありますか？

ご迷惑をおかけして申し訳ありません。

Answer 1

ストライプ要素Vuejs 2

使用、参考文献はvuejsで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); 
}