Javascript 如何使用nuxt中的函数克隆vue元素？

我有这样的模板

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

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

克隆的元素可以成功附加到

#appendElementsHere

，

---

但是单击功能不起作用。我认为可能是vue元素中的click函数，而不是html。如何将元素克隆为vue元素，而不仅仅是html？或者在脚本（方法）中创建vue元素，然后将其附加到dom中的任何想法？？？

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

但是，您可以尝试以更Vue的方式来执行此操作，因此，您可以创建所需组件的Vue实例（在您的示例中是MyElement），代码将传递所有所需的道具/数据，然后将其附加到所需的元素中，而不是让隐藏的组件等待克隆

关于如何使用按钮。如果单击“单击以插入”，您将看到CustomButton组件是如何附加到按钮右侧的

谢谢

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