如何再次测试多个选项的苗条输入属性
How to test svelte input attribute agains multiple options
我有储值和两组数据:
$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 个值
进行测试时
我不明白如何一次检查超过一种颜色。
所以基本上,使用我的 const productType ->
如果 $selectedColor == 'black' || 我想禁用 id:3 'white'
有什么建议吗?或者也许对此有更紧凑的解决方案?谢谢
实现此目的的最简单方法是使用数组 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)}
我有储值和两组数据:
$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 个值
进行测试时我不明白如何一次检查超过一种颜色。 所以基本上,使用我的 const productType -> 如果 $selectedColor == 'black' || 我想禁用 id:3 'white'
有什么建议吗?或者也许对此有更紧凑的解决方案?谢谢
实现此目的的最简单方法是使用数组 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)}