I tried to create a page to set/change key-value pairs for the item.There is a button to create a new line in the form with two input, one select, and one textfield.I'd like change the select to flowbite button+dropdown (for more control+styling of the content):
<script> let validValues = [ { key: 'key1',value:'value1'], { key: 'key2',value:'value2'], { key: 'key3',value:'value3'] }; let properties = []; function addProperty(){ console.log(properties); properties = [...properties, {id: '', key: '', value: ''}]; console.log(properties); } function removeProperty(i){ console.log(i); console.log(properties); properties.splice(i, 1); properties = properties; console.log(properties); };</script><main><button on:click={() => addProperty()}>Add new row</button> {#each properties as prop, i}<button id="button{i}" type="button"><div>{properties[i].key}</div></button><Dropdown triggeredBy="#button{i}" > {#each Object.entries(validProp) as [key,prop]}<DropdownItem class="" on:click={() => {properties[i].key=prop.value}}> {prop.value}</DropdownItem> {/each}</Dropdown><Input type="text" bind:value={properties[i].value} /> {/each}</main>So: If I click on the DropdownItem, it not closing. I need to close it.I need a boolean variable to bind the "open" props in the . For that I need create and maintained a new array. (I cant store this variable inside the , no function to open/close it)I can maintained at the addPropery, removeProperty functions, but it is not a good way.Maybe I can create it at the {#each) but that is not the svelte way.
how can I handle this?Thanx