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

Question

我发现很多库以某种方式将外部库(及其DOM元素)与Vue.js结合在一起.所有这些似乎只是将子元素添加到Vue.js管理的DOM节点.

我编写了Vue-Stripe-Elements以便更容易地使用新的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>

如果Stripe只将子元素添加到它所安装的元素中,那么这将起作用,但它看起来像Stripe而是转换或替换给定的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作战,我可能会在这里产生奇怪的副作用.或者我只是做其他附加库手动做的事情,这是最好的方法吗？

是否有"官方"方式来做到这一点？

在此先感谢任何有用的评论.

Answer 1

条纹元素Vuejs 2

使用refs在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);
}