javascript - 在 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 节点。 Stripe 当然也不支持任何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

Stripe 元素 Vuejs 2

在vuejs中使用refs获取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);
}