Svelte中如何获取svelte-accessible-accordion每个AccordionItem的动态id

问题原因 #

你只定义了单个id变量，所有AccordionItem的bind:id都会把自身的id值赋值给这同一个变量，后面渲染的组件会覆盖前面的赋值，所以最终所有地方引用的id都是最后一个组件的id值。另外bind:this绑定的是组件实例本身，不是组件的id属性，自然无法满足你的需求。

解决方案 #

场景1：静态写死AccordionItem

给每个AccordionItem声明独立的id变量分别绑定即可：

<script>
import { Accordion, AccordionItem } from "svelte-accessible-accordion";

let id1;
let id2;
</script>

<Accordion>
  <AccordionItem bind:id={id1} title="Title 1 {id1}">Content 1</AccordionItem>
  <AccordionItem bind:id={id2} title="Title 2 {id2}">Content 2</AccordionItem>
  <AccordionItem title="Title 3">Content 3</AccordionItem>
</Accordion>

场景2：动态渲染多个AccordionItem

如果是通过列表循环渲染的组件，可以用数组存储每个item对应的id：

<script>
import { Accordion, AccordionItem } from "svelte-accessible-accordion";

const itemList = [
  { title: "标题1", content: "内容1" },
  { title: "标题2", content: "内容2" },
  { title: "标题3", content: "内容3" }
];
// 初始化和列表长度一致的数组，存储每个item的id
let itemIds = new Array(itemList.length);
</script>

<Accordion>
  {#each itemList as item, index}
    <AccordionItem 
      bind:id={itemIds[index]}
      title="{item.title} {itemIds[index] || ''}"
    >
      {item.content}
    </AccordionItem>
  {/each}
</Accordion>

内容的提问来源于stack exchange，提问作者user1272597