bandolier2/templates/todo_alpine.html

{% include "./header.html" %}
<h1>Your TODOs</h1>

<script src="/alpine.js"></script>

<script>
  const new_task = async (todos, task) => {
    // zero error handling but fine for now
    return (await axios.post("/todo_alpine", {task})).data;
  }
</script>

<p>Welcome {{ name }}, here's your TODOs</p>

<div
  x-data="{todos: []}"
  x-init="todos = (await axios.get('/todo_alpine')).data">
  <ol>
    <template x-for="todo of todos">
      <li x-text="todo.task"></li>
    </template>
  </ol>

  <h4>Add a New TODO</h4>
  <form action="/todo_index" @submit.prevent="todos = new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
    <label for="task">Task</label>
    <input name="task" x-model="task"></input>
    <button type="button" @click="todos = new_task(todos, task), task = ''">Submit</button>
  </form>

</div>
{% include "./footer.html" %}