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

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

但是，您可以尝试以一种更Vue的方式进行操作，因此可以使所需的组件（在您的情况下为MyElement）创建具有所需代码的Vue实例，而不是等待克隆一个隐藏的组件。所需的道具/数据，然后将其附加到所需的元素上。

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

谢谢

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

1 个答案: