Estoy tratando de mostrar y ocultar los div basados en un valor seleccionado del cuadro de selección. Tengo mis cuadros de selección funcionando para que cambie el valor así:
// x-data="{ week: false, day: false } <select @change="week = $event.target.value"> <option x-bind:value="Week 1">Week 1</option> <option x-bind:value="Week 2">Week 2</option> <option x-bind:value="Week 3">Week 3</option> </select> <select @change="day = $event.target.value"> <option x-bind:value="1">Monday</option> <option x-bind:value="2">Tuesday</option> <option x-bind:value="3">Wednesday</option> <option x-bind:value="4">Thursday</option> <option x-bind:value="5">Friday</option> </select> <span x-text="'option '+ week"></span> <span x-text="'option '+ day"></span>Luego intento mostrar y ocultar divs en función de las selecciones, pero no tengo suerte.
<div :class="week !== {{ $week['name'] }} ? 'hidden' : 'block'"> <p>{{ $week['name'] }}</p> </div>¿Cómo puedo configurar correctamente la clase? o puedo hacer esto usando x-show?
Cuando inserta cadenas desde el sistema de plantilla de back-end, debe asegurarse de colocarlo en un entorno correcto. Blade no sabe que realmente desea generar código JS, solo analiza la parte específica de Blade de la plantilla. En el atributo :class faltan las comillas alrededor {{ $week['name'] }} . Blade simplemente inserta la cadena, por ejemplo Week 1 , pero debe agregar las comillas alrededor para crear un código JS válido. Y sí, puede usar la directiva x-show para ocultar/mostrar contenido. Además, en lugar de @change para el elemento de entrada, puede usar la directiva x-model .
<!-- Assuming you have 'week' and 'day' in x-data --> <select x-model="week"> <option x-bind:value="Week 1">Week 1</option> <option x-bind:value="Week 2">Week 2</option> <option x-bind:value="Week 3">Week 3</option> </select> <select x-model="day"> <option x-bind:value="1">Monday</option> <option x-bind:value="2">Tuesday</option> <option x-bind:value="3">Wednesday</option> <option x-bind:value="4">Thursday</option> <option x-bind:value="5">Friday</option> </select> <div x-show="week === '{{ $week['name'] }}'"> <p>{{ $week['name'] }}</p> </div>