Alpine demo errors

[JohannesMP]

When running through a local webhost in Chrome Version 96.0.4664.110 for Windows, I get these errors in the developer console when viewing /alpine-app/index.html:

Attempting to add an item using the form will repeat the warning and error.

[JohannesMP]

This issue seems like it would be addressed with pull request #9

I will keep this issue open for now as regardless of conventions or not, the current demo code presented in the repo is non-functional.

[Gruodis]

try JS in this order and use x-for in template

https://alpinejs.dev/directives/for

<div x-data="{ todoText: '' }">
    <ul>
        <template x-for="todo in $store.todos">
            <li x-text="todo"></li>
        </template>
    </ul>
    <form x-on:submit.prevent="addTodo(todoText)">
        <input type="text" x-model="todoText" placeholder="What needs to be done?">
        <button type="submit">Add Todo</button>
    </form>
</div>

<script>

    function addTodo(todoText) {
        Alpine.store('todos').push(todoText);
        localStorage.setItem('todos', JSON.stringify(todos));
    }

    document.addEventListener('alpine:init', () => {
        const existingTodos = localStorage.getItem('todos');
    	todos = JSON.parse(existingTodos) || [];

        Alpine.store('todos', todos);
    })

</script>
    
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>