Alpine.js component

Encapsulate nested content by binding x-html

by samu_eyes

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.js"></script>
<script
  defer
  src="https://unpkg.com/alpinejs-component@latest/dist/component.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>

<body>

    <div x-data="dropdown" x-bind="bind"></div>

<div
  x-data="{
    people: [
      { name: 'John', age: '25', skills: ['JavaScript', 'CSS'] },
      { name: 'Jane', age: '30', skills: ['Laravel', 'MySQL', 'jQuery'] }
    ]
  }"
>
  <ul>
    <template x-for="person in people">
      <x-component template="person" x-data="{ item: person }"></x-component>
    </template>
  </ul>
</div>

<template id="person">
  <li>
    <h2 x-text="item.name"></h2>111

    <p x-text="item.age"></p>

    <ul>
      <template x-for="skill in item.skills">
        <li x-text="skill"></li>
      </template>
    </ul>
  </li>
</template>
</body>

<script type="text/javascript">

    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            show: false,

            bind: {
                ['x-html']() { return `
                    <button @click="show = !show">Click me!</button>
                    <div x-show="show">Hello World</div>
                `},
            },
        }));
    })

</script>

</html>