如何在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 的角度来看，您所做的在技术上是正确的，但是单击功能不起作用，因为您在“克隆”元素后没有进行任何数据绑定。我说“克隆”，因为您所做的只是传递一堆包含 HTML 的字符串。话虽如此，您接下来要做的是手动将事件侦听器添加到克隆的元素中。但是，您可以尝试以更 Vue 的方式进行操作，因此您可以使用传递所有道具的代码创建所需组件的 Vue 实例（在您的情况下为 MyElement），而不是等待被克隆的隐藏组件/数据，然后将其附加到需要它的元素。这是一个如何使用按钮进行操作的示例。如果单击“单击以插入”，您将看到 CustomButton 组件如何附加到按钮的右侧。谢谢，