创建一个组件来接受复选框配置，以便仅使用svelte在表单中添加

Question

我有一个带有item的表单。用户需要选择要添加到项目中的选项。选项组类似于数组的对象:

let optiongroups = [
{
groupname : "exactly1",
grouplimit : 1,
id : 123,
optionitems : [
{
name : "One",
price : 1
},
{
name : "Two",
price : 2
},
{
name : "Three",
price : 3
},
{
name : "Four",
price : 4
}
]
},
{
groupname : "exactly2",
grouplimit : 2,
id : 369,
optionitems : [
{
name : "2-One",
price : 22
},
{
name : "2-Two",
price : 44
},
{
name : "2-Three",
price : 66
},
{
name : "2-Four",
price : 88
}
]
}]

我的表单是:

<form name="optionsform" on:submit|preventDefault={()=>collectoptions(itemid, itemprice, itemname,  itemdescription, variationname, variationprice)}>
{#each optiongroups as group}
<div style="margin : 5px; border : solid green;">
<li style="list-style : none;">
{group.groupname} - {group.grouplimit}
{#each group.optionitems as option}
<li>
<label>
<input name={group.groupname}  type="checkbox" bind:group={checkresults} value={option} on:click={handleclick}>
{option.name} : {option.price}
</label>

</li>
{/each}
</li>
</div>
{/each}
<button type="submit" >Add To cart</button>
</form>

@Deotyma建议构建一个组件——让我们称之为option component——像这样:

<script> 
//there are variables to export
export let value
export let group
export let name
export id
export let checked
// this is a function to "catch" your changes if the answer that you expect is equal to value that the user will check
function onChange(event: Event) {
group = (<HTMLInputElement>event.target).value;
}
$: checked = (group === value)
</script>

<input type="checkbox" id={id} bind:group={ group } value={ value } name={ name } on:change="{ onChange }" { checked }/>
<slot/>

我的问题是如何在我的表单组件中包含组件，以及如何将optiongroups信息/参数传递给选项组件?考虑到我有不止一个选项第一组选项的数量限制为1另一组选项的数量限制为2?

我实际上创建了这个问题，以便其他人可以从组件的思想中学习。我将邀请Deotyma来完成答案，以便其他人可以使用它，因为它是解决复选框限制问题的优雅解决方案。我认为这是目前为止最好的解决办法。

Answer 1

对不起，我不在。4日快乐。玩耍后提供的代码很多答案,我认为答案到了是最好的。

不仅因为它清晰简洁，而且还以最好的方式组织。

提供的答案也有一个回复页面供您参考。

回复的答案在这里

答案在这里

正如H.B.在他的回答中指出的那样，单变量是我的错误。相反，您需要按组检查状态，正如他在示例中清楚地解释的那样。

checkresults = Object.fromEntries(optiongroups.map(g => [g.groupname, []]));
<input name={group.groupname}  type="checkbox"
bind:group={checkresults[group.groupname]}
value={[{ "name" : option.name }, { "price" : option.price }]}
disabled={
checkresults[group.groupname].length === group.grouplimit &&
checkresults[group.groupname].some(x => x[0].name == option.name) == false
}>

我个人最终选择了第二种解决方案，它甚至比我想做的还要好。拥有一个独立的组件允许你在组件内部自由地做任何你想做的事情，并将它包含在另一个组件中，而不用担心状态。

单独的组件在这里

再次感谢H.B.的帮助。如果你住在美国，祝你国庆节快乐。