Svelte Flowbite 在 {#each} 块中创建下拉菜单并在选择时关闭

Question

我尝试创建一个页面来设置/更改该项目的键值对。 有一个按钮可以在表单中创建一个新行，其中包含两个输入、一个选择和一个文本字段。 我想将选择更改为 flowbite 按钮+下拉菜单（以获得更多控制+内容样式）：

<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>

所以：如果我单击 DropdownItem，它不会关闭。我需要关闭它。 我需要一个布尔变量来绑定 .为此，我需要创建并维护一个新数组。 （我无法将此变量存储在 中，没有打开/关闭它的函数） 我可以维护addPropery、removeProperty函数，但这不是一个好方法。 也许我可以在 {#each) 创建它，但这不是最简洁的方式。

我该如何处理这个问题？ 谢谢

Answer 1

程序化打开/关闭

当您想通过 javascript 代码控制下拉菜单打开状态时，您可以绑定到 open 属性。