<!doctype html>
<html lang="en">
<body>
<h1>
Serialize Data Directly Into x-data Scope Binding
</h1>
<main x-data="{
users: JSON.parse( '<cfoutput>#encodeForJavaScript( serializeJson( request.users ) )#</cfoutput>' )
}">
<ul>
<template x-for="user in users" :key="user.id">
<li>
<strong x-text="user.id"></strong>:
<span x-text="user.name"></span>
</li>
</template>
</ul>
<!--
This time, this button WILL WORK because the data was used to directly define
an x-data scope.
-->
<button
@click="
users.push({
id: 5,
name: 'Noobi'
});
console.dir( users )
">
Add User
</button>
</main>
<script type="text/javascript" src="../vendor/alpine.3.13.5.js" defer></script>
</body>
</html>