Question

我想将数据发送给用户模型的形式为精巧/精简

<input type="text" bind:value={user.label}>

..按预期工作。但是如何发送user.offer_ids

let offer_ids = [];

{#each offers as offer}
  <label>
   <input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
  </label>
{/each}

我找不到任何苗条的示例如何完成这项工作，我认为这是表格的基本内容。谢谢您的帮助

可能还不清楚。我想将数据发送给Json：

<form>

<input type="text" bind:value={user.label}> //gives data to 'user'

{#each offers as offer}
  <label>
   <input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
  </label>
{/each}

//如何将所有选定的ID分配给“用户”

</form>

希望现在更清楚了。

Answer 1

使用复选框，我们绑定到checked而不是value：

<script>
    let name = 'world';
    let flag = false
</script>

<style>
    .highlighted {
        color: red
    }
</style>

<h1 class:highlighted={flag}>Hello {name}!</h1>
<label for="checkbox">Highlight header</label>
<input id="checkbox" type='checkbox' bind:checked={flag}/>

编辑

商品模型应具有选中或选中状态。然后，您可以将复选框绑定到该地址：

<script>
    let name = 'world';
    let offers = [
        {id: 1, name: 'One', checked: false},
        {id: 2, name: 'Two', checked: false},
        {id: 3, name: 'Three', checked: false},
    ]
</script>

{#each offers as offer, index (offer.id)}
    <label for={'checkbox'+offer.id}>{offer.name}</label>
  <input id={'checkbox'+offer.id} bind:checked={offer.checked} type='checkbox'/>
{/each}

<div>
    {offers.filter(offer => offer.checked).map(offer => offer.name)}
</div>

在这里，我们显示三个复选框，下面的文本在屏幕上打印所选商品的名称。

REPL：https://svelte.dev/repl/461fea432dc54ed0a744afc4e05bf34b?version=3.22.3

Answer 2

所以我现在的解决方案：

let offer_ids = [];

<form>

 {#each offers as offer, i (offer.id)}
  <label>
    <input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
  </label><br/>
 {/each}

</form>
enter code here

并在功能中...

 async function publish() {

    user.offer_ids = offer_ids
    const response = await (api.post('users', {user}));

svelte中的数据绑定复选框

2 个答案: