如何测试多个选项的苗条输入属性

Question

我有存储价值和两组数据：

$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) 
      }
   ],
}

然后我为产品类型和颜色填充输入（类型：单选）

{#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}

我试图 -> 禁用输入 IF $selectedColor == hiddenInColor

我是这样做的->

disabled={option.hiddenInColor == $selectedColor}

而且效果很好。但是...仅当您针对 1 个值进行测试时

我不明白如何一次检查超过 1 种颜色。 所以基本上，使用我的 const productType -> 如果 $selectedColor == 'black' || 我想禁用 id:3 '白色'

有什么建议吗？或者也许有更紧凑的解决方案？谢谢

Answer 1

实现这一点的最简单方法是使用数组 hiddenInColors 而不是单个标量值：

const productType = {
   options: [
      {id:0, title: 'somethings', hiddenInColors: ['white']},
      {id:1, title: 'somethings', hiddenInColors: ['black']},
      {id:2, title: 'somethings', hiddenInColors: ['black','white']},
   ],
}

然后像这样设置禁用选项：

disabled={option.hiddenInColors.includes($selectedColor)}