I created a custom dropdown component. I have multiples instances of it on the same page like this:
label : <Select>
label : <Select>
label : <Select>
Whenever I click on the component, the first one opens only. How can I fix this? Thank you.
// Select.svelte
<div class="dropdown">
<slot></slot>
</div>
SelectItem.svelte
<Select>
content
</Select>
items.svelte
{#each items as item}
<item />
{/each}
item.svelte
<SelectItem/>
Ideally, you would have something like this
<script>
//App.svelte
import Select from "./Select.svelte"
let options = [
{label:"State 1", id:1},
{label:"State 2", id:2}
]
let country = [
{label:"Country 1", id:1},
{label:"Country 2", id:2}
]
</script>
<Select options={options}/>
<Select options={country} />
<script>
//Select.svelte
export let options = []
</script>
<select>
{#each options as option}
<option>{option.label}</option>
{/each}
</select>
Check REPL
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.