Datatble Server Side Processing is dynamically comming from 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>
//AlpineJs Code For X-Data
<script>
function AppData()
{
return {
user:{},
getEdit(user)
{
this.user = user;
}
};
}
</script>
You bind the input elements to non-existing object attributes. You need to define them before you bind them to an element. Furthermore the AppData().getEdit() does not work and is unnecessary. You can just set the user object with the respective data.
<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>
Note that I moved the table into the main div, where Alpine.js' x-data directive is present, so the code in @click can access the component data.