Ejercicio: Ejercicio 3
Crea una aplicación con Alpine JS que tenga una lista de elementos y un botón para agregar nuevos elementos a la lista. Usa la directiva x-data para inicializar la lista con algunos elementos y la directiva x-on para escuchar el evento click en el botón y agregar un nuevo elemento a la lista.
Solución:
<body>
<div x-data="mainComp()">
<ul>
<template x-for="item in items" :key="item">
<li x-text="item"></li>
</template>
</ul>
<input type="text" x-model="nuevoItem">
<button @click="crearItem()">Agregar item</button>
</div>
<script>
function mainComp() {
return {
items : ['Tarea 1', 'Tarea 2'],
nuevoItem: '',
crearItem: function() {
this.items.push(this.nuevoItem)
this.nuevoItem = ''
}
}
}
</script>
</body>