使用 Alpine.js 组件克隆 HTML 元素

Question

我有 Html 元素和 Alpine.js 组件。我希望能够克隆它（使用 jQuery）。不幸的是它不起作用 - 使用 x-for 时我得到：

ReferenceError: option is not defined

实际上有些元素内容是重复的（每个段落显示两次“一二三”）

显然这里的代码被简化了（事实上我想用更多的组件方法克隆自定义下拉菜单）但我相信简化的代码清楚地显示了问题。

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>

JavaScript代码：

const CustomComponent = (function() {

  return {
  
    options: [],
    initialize()
    {    
      this.options = ['one', 'two', 'three'];
    }
  }
}());


$('button').on('click', function() {
    $('div').append($('p').first().clone());

});

JS Fiddle

Answer 1

似乎解决方案是拥有在克隆之前不会被解析的元素副本：

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>

<template class="tpl">
  <p x-data="{...CustomComponent}" x-init="initialize()">
    <template x-for="option in options">
       <span x-text="option"></span>
    </template>
  </p>
</template>

JavaScript:

const CustomComponent = (function() {

  return {
  
    options: [],
    initialize()
    {
      this.options = ['one', 'two', 'three'];
    }
  }
}());


$('button').on('click', function() {

    $('div').append($('template.tpl').html());

});

JS Fiddle

使用 Alpine.js 组件克隆 HTML 元素

Cloning HTML element with Alpine.js component

html

javascript

jquery

dom

alpine.js