-
|
Is there a way to get this work ? I have the array outside the scope of the template though. Was wondering if it's still possible. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Table</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script>
let content = [
{ name: 'Test 1', description: 'Test Description 1' },
{ name: 'Test 2', description: 'Test Description 2' },
{ name: 'Test 3', description: 'Test Description 3' },
{ name: 'Test 4', description: 'Test Description 4' },
{ name: 'Test 5', description: 'Test Description 5' },
];
document.addEventListener("DOMContentLoaded", () =>
{
document.getElementById("frm").addEventListener("submit", (e) =>
{
e.preventDefault();
content.push({ name: document.getElementById('name').value, description: document.getElementById('description').value });
return;
});
});
</script>
</head>
<body>
<form id="frm" action="" method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name" />
</div>
<div>
<label for="description">Description</label>
<input type="text" id="description" name="description" placeholder="Description" />
</div>
<div>
<button id="btn-Submit">Submit</button>
</div>
</form>
<hr/>
<table id="tbl-data">
<thead>
<tr>
<th>No:</th><th>Name</th><th>Description</th>
</tr>
</thead>
<tbody x-data="{ data: content }">
<template x-for="(d, i) in data" :key="data[i].name">
<tr>
<td x-text="i + 1"></td>
<td x-text="data[i].name"></td>
<td x-text="data[i].description"></td>
</tr>
</template>
</tbody>
</table>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Answered by
aidenybai
Mar 20, 2021
Replies: 1 comment
-
|
Hey anjanesh, to understand why this isn't working you will need some understanding on how Alpine works. When the content is grabbed, the state is set inside alpine and becomes a separate thing. You will need to directly change the state using alpine <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Table</title>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
defer
></script>
<script>
let content = [
{ name: 'Test 1', description: 'Test Description 1' },
{ name: 'Test 2', description: 'Test Description 2' },
{ name: 'Test 3', description: 'Test Description 3' },
{ name: 'Test 4', description: 'Test Description 4' },
{ name: 'Test 5', description: 'Test Description 5' },
];
</script>
</head>
<body>
<div x-data="{ data: content }">
<form
@submit.prevent="data.push({
name: document.getElementById('name').value,
description: document.getElementById('description').value,
})"
>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name" />
</div>
<div>
<label for="description">Description</label>
<input type="text" id="description" name="description" placeholder="Description" />
</div>
<div>
<button id="btn-Submit">Submit</button>
</div>
</form>
<hr />
<table id="tbl-data">
<thead>
<tr>
<th>No:</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<template x-for="(d, i) in data" :key="data[i].name">
<tr>
<td x-text="i + 1"></td>
<td x-text="data[i].name"></td>
<td x-text="data[i].description"></td>
</tr>
</template>
</tbody>
</table>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
anjanesh
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey anjanesh, to understand why this isn't working you will need some understanding on how Alpine works. When the content is grabbed, the state is set inside alpine and becomes a separate thing. You will need to directly change the state using alpine
__x. Another possible solution is just writing good Alpine code: