Tengo valor de tienda y dos conjuntos de datos:
$selectedColor const productColor = { options: [ {id:0, title: 'white'}, {id:1, title: 'black'}, {id:2, title: 'red'}, {id:3, title: 'yellow'} ], } const productType = { options: [ {id:0, title: 'somethings', hiddenInColor: 'white'}, {id:1, title: 'somethings', hiddenInColor: 'black'}, { id:2, title: 'somethings', hiddenInColor: //here should be black AND white //problem is I can't understand how to use nested json with disable attribute (see below) } ], }luego he rellenado las entradas (tipo: radio) para el tipo de producto y el color
{#each productType.options as option (option.id)} {#if activeTab !== option.hiddenIn} <li> <label> <input type="radio" name="name" value={option.id} on:change={() => optionHasChanged(option.name, somethings)} disabled={option.hiddenInColor == $selectedColor} bind:group={defaultProductType}> {option.title} </label> </li> {/if} {/each}Estaba tratando de -> deshabilitar la entrada IF $selectedColor == hiddenInColor
lo hice así ->
disabled={option.hiddenInColor == $selectedColor}y funciona bien Pero... solo cuando lo pruebas contra 1 valor
No puedo entender cómo verificar más de 1 color a la vez. Básicamente, usando mi const productType -> me gustaría deshabilitar id:3 si $selectedColor == 'black' || 'blanco'
algún consejo? ¿O tal vez hay una solución más compacta para esto? Gracias
La forma más sencilla de lograr esto sería usar una matriz hiddenInColors en lugar de un único valor escalar:
const productType = { options: [ {id:0, title: 'somethings', hiddenInColors: ['white']}, {id:1, title: 'somethings', hiddenInColors: ['black']}, {id:2, title: 'somethings', hiddenInColors: ['black','white']}, ], }y luego configure la opción deshabilitada de esta manera:
disabled={option.hiddenInColors.includes($selectedColor)}