5 ms·
The horror. The dropdown example <div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm"> <button @click="open=!open" class="
by lakomen 3y ago
The horror.
The dropdown example
<div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
<button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
<span class="block px-4 py-2">Dropdown</span>
</button>
<ul x-show="open" class="absolute origin-top-left top-0 w-32 p-4 mt-10 bg-white rounded-md shadow-sm" x-transition x-cloak>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
It would also totally collide with Vue's template syntax.
- mushufasa 3y agoCan you elaborate on what specifically is horrible there? Compatibility with Vue wouldn't make sense as a goal for a competitive JS framework.
- err4nt 3y agoAnd is invalid HTML. You can invent any attribute so long as it begins with 'data-', or you can define custom HTML elements with whatever custom attributes you want, but you aren't allowed to invent non-standard attributes for standard elements.
- volkandkaya 3y agoWhy would you use Vue and Alpine together?