mattvague/alpine-data-clash.html

## alpine-data-clash.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js Example</title>

  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.directive('modal', ($el) => {
        Alpine.bind($el, {
          "x-data"() {
            return {
              __isOpen: true
            }
          },
          "x-show": '__isOpen'
        });
      })

      Alpine.magic('modal', ($el) => {
        const $data = Alpine.$data($el)
        return {
          get isOpen() { return $data.__isOpen },
          set isOpen(open) { $data.__isOpen = open }
        }
      })

      Alpine.directive('disclosure', ($el) => {
        Alpine.bind($el, {
          "x-data"() {
            return {
              __isOpen: true
            }
          },
          "x-show": '__isOpen'
        });
      })

      Alpine.magic('disclosure', ($el) => {
        const $data = Alpine.$data($el)
        return {
          get isOpen() { return $data.__isOpen },
          set isOpen(open) { $data.__isOpen = open }
        }
      })
    })
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data x-modal>
    My Modal!
    <button @click="$modal.isOpen = false">Close Modal 1</button>

    <div x-disclosure>
      <button @click="$modal.isOpen = false">Close Modal 2</button>
      <button @click="$disclosure.isOpen = false">Close Disclosure</button>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Alpine.js Example</title>

	<script>
	document.addEventListener('alpine:init', () => {
	Alpine.directive('modal', ($el) => {
	Alpine.bind($el, {
	"x-data"() {
	return {
	__isOpen: true
	}
	},
	"x-show": '__isOpen'
	});
	})

	Alpine.magic('modal', ($el) => {
	const $data = Alpine.$data($el)
	return {
	get isOpen() { return $data.__isOpen },
	set isOpen(open) { $data.__isOpen = open }
	}
	})

	Alpine.directive('disclosure', ($el) => {
	Alpine.bind($el, {
	"x-data"() {
	return {
	__isOpen: true
	}
	},
	"x-show": '__isOpen'
	});
	})

	Alpine.magic('disclosure', ($el) => {
	const $data = Alpine.$data($el)
	return {
	get isOpen() { return $data.__isOpen },
	set isOpen(open) { $data.__isOpen = open }
	}
	})
	})
	</script>
	<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
	<div x-data x-modal>
	My Modal!
	<button @click="$modal.isOpen = false">Close Modal 1</button>

	<div x-disclosure>
	<button @click="$modal.isOpen = false">Close Modal 2</button>
	<button @click="$disclosure.isOpen = false">Close Disclosure</button>
	</div>
	</div>
	</body>
	</html>