Skip to content

Instantly share code, notes, and snippets.

Last active May 25, 2021
What would you like to do?
<script src="" defer></script>
<div x-data="{ items: [], adding: false }" x-init="$refs.ok.disabled = true">
<template x-for="item in items" :key="item">
<span x-text="item"></span>
<button @click="items = items.filter(i => i !== item)">DEL</button>
<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>
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