Javascript 使用Alpine.js组件克隆HTML元素
我有一个带有Alpine.js组件的Html元素。我希望能够克隆它(使用jQuery)。不幸的是,它不起作用-当使用Javascript 使用Alpine.js组件克隆HTML元素,javascript,html,jquery,dom,alpine.js,Javascript,Html,Jquery,Dom,Alpine.js,我有一个带有Alpine.js组件的Html元素。我希望能够克隆它(使用jQuery)。不幸的是,它不起作用-当使用x-for时,我得到: ReferenceError:未定义选项 事实上,某些元素的内容是重复的(“一二三”对于每个段落显示两次) 显然,这里的代码是简化的(事实上,我想用更多的组件方法克隆自定义下拉列表),但我相信简化的代码清楚地显示了这个问题 Html代码: <div> <p x-data="{...CustomComponent}" x
x-for
时,我得到:
ReferenceError:未定义选项
事实上,某些元素的内容是重复的(“一二三”对于每个段落显示两次)
显然,这里的代码是简化的(事实上,我想用更多的组件方法克隆自定义下拉列表),但我相信简化的代码清楚地显示了这个问题
Html代码:
<div>
<p x-data="{...CustomComponent}" x-init="initialize()">
<template x-for="option in options">
<span x-text="option"></span>
</template>
</p>
</div>
<button>Clone element</button>
解决方案似乎是让元素的副本在克隆之前不会被解析: Html:
const CustomComponent = (function() {
return {
options: [],
initialize()
{
this.options = ['one', 'two', 'three'];
}
}
}());
$('button').on('click', function() {
$('div').append($('p').first().clone());
});
<div>
<p x-data="{...CustomComponent}" x-init="initialize()">
<template x-for="option in options">
<span x-text="option"></span>
</template>
</p>
</div>
<button>Clone element</button>
<template class="tpl">
<p x-data="{...CustomComponent}" x-init="initialize()">
<template x-for="option in options">
<span x-text="option"></span>
</template>
</p>
</template>
const CustomComponent = (function() {
return {
options: [],
initialize()
{
this.options = ['one', 'two', 'three'];
}
}
}());
$('button').on('click', function() {
$('div').append($('template.tpl').html());
});