El procesamiento del lado del servidor Datatble proviene dinámicamente del backend yajra datatable
<div x-data="AppData()"> <form> <input x-model="user.name" /> <input x-model="user.age" /> </form> </div>` <table id="datatable"> <tr> <td>Jhone<td> <td>27<td> <td><button onclick="AppData().getEdit({name:'Jhone',age:27})">Edit<button><td> </tr>//Código AlpineJs para datos X
<script> function AppData() { return { user:{}, getEdit(user) { this.user = user; } }; } </script>Vincule los elementos de entrada a atributos de objeto no existentes. Debe definirlos antes de vincularlos a un elemento. Además AppData().getEdit() no funciona y es innecesario. Simplemente puede configurar el objeto de user con los datos respectivos.
<div x-data="AppData()"> <form> <input x-model="user.name" /> <input x-model="user.age" /> </form> <table id="datatable"> <tr> <td>Jhone</td> <td>27</td> <td><button @click="user = {name: 'Jhone', age: '27'}">Edit</button></td> </tr> </table> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('AppData', () => ({ user: { name: '', age: '' }, })) }) </script> Tenga en cuenta que moví la tabla al div principal, donde está presente la directiva x-data de Alpine.js, por lo que el código en @click puede acceder a los datos del componente.