如何获取一个数组的项目，在选择中使用 svelte 选择？

Question

我有以下 formData 对象，它具有我从输入和选择中读取的属性，但我真的不明白如何使选择只选择我选择的选项，因为提交时会发送所有对象用户数组，而不是选择中选择的那个

<script>

 let users_options = [
    {id:22, name: "lana"},
    {id:33,name:"John"}
    {id:45,name:"avril"}
]

let formData = {
    id:5,
    users: users_options
    name:"",
    email:""
}
    
    function send(){
        console.log(formData);
    }


</script>


<form on:submit|preventDefault={send}>

  <label>name</label> <br>
  <input type="text" 
  bind:value={formData.name}
  on:input={ e => (formData.name => e.target.value)}
  />
  
  <label>email</label>
  
  <input type="email" bind:value={formData.email}
  on:input={ e => (formData.email => e.target.value)}
  />

  <label>Select user</label><br>
  
  <select>
    {#each formData.users as item (item.id)}
      <option value={item.name}>{item.name}</option>
    
    {/each}
  
  </select>
  
</form>

Answer 1

我真的建议您为表单的状态创建一个对象，以便formData 对象不包含所有users，而只包含选定的名称。为此，您只需一个简单的bind：

<script>
 let users_options = [
    {id:22, name: "lana"},
    {id:33,name:"John"},
    {id:45,name:"avril"}
]

let formData = {
    id:5,
    user: null,
    name:"",
    email:""
}
</script>


<form on:submit|preventDefault={send}>
  <select bind:value={formData.user}>
    {#each users_options as user}
      <option value={user.name}>{user.name}</option>
    {/each}
  </select>
</form>

然后，当您发送对象时，您只需在users_options 中找到正确的user 对象。在现代 javascript 中，借助 find 实现它非常简单：

function send() {
    console.log({
        ...formData,
        user: users_options.find(userOption => {
            return userOption.name === formData.user
        })
    });
}

所以最终的代码是这样的：

<script>

 let users_options = [
    {id:22, name: "lana"},
    {id:33,name:"John"},
    {id:45,name:"avril"}
]

let formData = {
    id:5,
    user: null,
    name:"",
    email:""
}
    
function send(){
    console.log({
        ...formData,
        user: users_options.find(userOption => {
            return userOption.name === formData.user
        })
    });
}
    
$: console.log(formData)


</script>


<form on:submit|preventDefault={send}>

  <label>name</label> <br>
  <input type="text" 
  bind:value={formData.name}
  on:input={ e => (formData.name = e.target.value)}
  />
  
  <label>email</label>
  
  <input type="email" bind:value={formData.email}
  on:input={ e => (formData.email = e.target.value)}
  />

  <label>Select user</label><br>
  
  <select bind:value={formData.user}>
    {#each users_options as user}
      <option value={user.name}>{user.name}</option>
    
    {/each}
  
  </select>
  
    <button type="submit">
        Submit
    </button>
</form>

看看REPL。

Answer 2

您可以将变量绑定到<select /> 元素以保留所选选项。对其他表单字段执行相同操作会简化代码。

<script>
    let users_options = [
        {id:22, name: "lana"},
        {id:33, name:"John"},
        {id:45, name:"avril"}
    ]

    let name
    let email
    let user
    
    function send(){
        const formData = {
            name,
            email,
            user
        }
        console.log(formData);
    }
</script>

<form on:submit|preventDefault={send}>
    <label>name</label> <br>
    <input type="text" bind:value={name} />

    <label>email</label>
    <input type="email" bind:value={email} />

    <label>Select user</label><br>
    <select bind:value={user}>
        {#each users_options as item (item.id)}
            <option value={item}>{item.name}</option>
        {/each}
    </select><br>

    <button type=submit>
        Submit
    </button>
</form>