Esto parece simple, pero no puedo resolverlo. Tengo tres divisiones que alternan según la selección, pero también intento tener un botón "ver todo" que alterna para mostrar las tres divisiones. También espero tener cargado el primer programa Div.
<div x-data="{ color: '' }"> <button x-on:click="color='Yellow', color='Red', color='Orange'">Show All</button> <select x-model="color"> <option>Red</option> <option>Orange</option> <option>Yellow</option> </select> <div x-show="color === 'Red'">Show on Load</div> <div x-show="color === 'Orange'">Orange</div> <div x-show="color === 'Yellow'">Yellow</div> </div>Enlace a JSbin
Introduzca un estado 'Todos' dedicado para mostrar todos los elementos. El valor predeterminado de color se puede dar en x-data .
<script src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> <div x-data="{ color: 'Red', defaultColor: 'Red' }"> <button x-on:click="color = (color === 'All') ? defaultColor : 'All'">Show All</button> <select x-model="color"> <option>Red</option> <option>Orange</option> <option>Yellow</option> </select> <div x-show="color === 'Red' || color === 'All'">Show on Load</div> <div x-show="color === 'Orange' || color === 'All'">Orange</div> <div x-show="color === 'Yellow' || color === 'All'">Yellow</div> </div>