如何在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元素中的click函数，而不是html。如何将元素克隆为vue-element，而不仅仅是html？或在脚本中创建vue元素的任何想法（方法），然后附加到dom ??

Answer 1

但是，您可以尝试以一种更Vue的方式进行操作，因此，与其等待隐藏的组件的克隆，不如创建所需组件的Vue实例（在本例中为MyElement），并通过所有所需的道具/数据，然后将其附加到所需的元素。

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

谢谢，