hasinhayder/mutate.html

## mutate.html
<html>

<head>
  <title>Mutating AlpineJS Object Data</title>
</head>

<body>
  <button onclick="changeDataByDispatchingEvent()">Mutate Alpine Object's Data Using Event</button>
  <br>
  <br>
  <button onclick="changeDataDirectly()">Mutate Alpine Object's Data Directly</button>
  <br>
  <br>
  <br>
  <div id="yumyum" x-data="data" @ulala.window='toggle'>
    <button @click="open = !open">Expand</button>

    <span x-show="open"> Content... </span>
  </div>

  <script src="//unpkg.com/alpinejs" defer></script>
  <script>
    const data = {
      open: false,

      toggle() {
        this.open = !this.open
      }
    }

    function changeDataByDispatchingEvent() {
      window.dispatchEvent(new Event('ulala'));
    }

    function changeDataDirectly() {
      const element =document.getElementById('yumyum');
      element._x_dataStack[0].open = !element._x_dataStack[0].open
    }
  </script>
</body>

</html>
	<html>

	<head>
	<title>Mutating AlpineJS Object Data</title>
	</head>

	<body>
	<button onclick="changeDataByDispatchingEvent()">Mutate Alpine Object's Data Using Event</button>
	<br>
	<br>
	<button onclick="changeDataDirectly()">Mutate Alpine Object's Data Directly</button>
	<br>
	<br>
	<br>
	<div id="yumyum" x-data="data" @ulala.window='toggle'>
	<button @click="open = !open">Expand</button>

	<span x-show="open"> Content... </span>
	</div>

	<script src="//unpkg.com/alpinejs" defer></script>
	<script>
	const data = {
	open: false,

	toggle() {
	this.open = !this.open
	}
	}

	function changeDataByDispatchingEvent() {
	window.dispatchEvent(new Event('ulala'));
	}

	function changeDataDirectly() {
	const element =document.getElementById('yumyum');
	element._x_dataStack[0].open = !element._x_dataStack[0].open
	}
	</script>
	</body>

	</html>