javascript - 如何在 nuxt 中克隆带有函数的 vue 元素？

Question

我有这样的模板

<template>
<div>
  <div id="hiddenElement">
    <MyElement v-for='...' @click="...">
    </MyElement>
  </div>

  <div id="appendElementsHere" />
</div<
</template>

用户可以将元素追加到列表中，所以我有这样的函数:

someFunc(){
const hidden = document.querySelector('#hiddenElement')
const target = document.querySelector('#appendElementsHere')
target.innerHtml += hidden.outerHtml
}

被克隆的元素可以成功附加到#appendElementsHere， 但是点击功能不起作用。我认为可能是 vue 元素中的点击功能，而不是 html。如何将元素克隆为 vue-element，而不仅仅是 html？或任何在脚本(方法)中创建 vue 元素然后附加到 dom 的想法？？

Answer 1

从 javascript 的 Angular 来看，您所做的在技术上是正确的，但是点击功能不起作用，因为您在“克隆”元素后没有进行任何数据绑定(bind)。我说“克隆”，因为您所做的只是传递一堆包含 HTML 的字符串。话虽如此，您接下来要做的就是手动将事件监听器添加到克隆的元素。

但是，您可以尝试以更 Vue 的方式来实现，因此您可以创建所需组件的 Vue 实例(在您的情况下为 MyElement)，并使用代码传递所有您想要的 Prop /数据，然后将其附加到您需要的元素。

Here's an example以及如何使用按钮进行操作。如果单击“单击以插入”，您将看到 CustomButton 组件是如何附加到按钮右侧的。

谢谢，