Skip to content

Instantly share code, notes, and snippets.

@lukaszmn
Last active May 25, 2021
Embed
What would you like to do?
<html><body>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<div x-data="{ items: [], adding: false }" x-init="$refs.ok.disabled = true">
<template x-for="item in items" :key="item">
<div>
<span x-text="item"></span>
<button @click="items = items.filter(i => i !== item)">DEL</button>
</div>
</template>
<button @click="adding = true">ADD</button>
<div x-show.transition="adding" @click.away="adding = false">
<label for="name">Name:</label>
<input id="name" x-model="name" @keyup="$refs.ok.disabled = name.length === 0" />
<button @click="adding = false">CANCEL</button>
<button @click="adding = false; items.push(name); name = ''; $refs.ok.disabled = true" x-ref="ok">OK</button>
</div>
</div>
</body></html>
@shashistack
Copy link

shashistack commented May 25, 2021

Awesome, thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment