我正在使用Svelte构建组件,其中有一个单词列表,您必须通过将单词拖到答案部分来按正确的顺序排列它们,为此,我正在使用SortableJS。
要存储答案和可以使用的单词,我会使用Svelte存储,并且一切正常。现在,我正在尝试执行相同的操作,但是有一个onClick事件。但是我有一个错误,其中存储值被更新,但是视图没有更新。
要显示选项和答案,我正在这样做:
<div
class="chips"
use:sortable="{{ items: answer, options: { group: 'chips', forceFallback: false } }}"
>
{#each get(answer) as chip, index}
<span class="chip" on:click="{handleAnswerClick(chip, index)}">
<spain class="tag is-medium">{chip}</spain>
</span>
{/each}
</div>
并且如果我将get
中的{#each get (answer) as chip, index}
替换为$answer
,则onClick`事件有效,但现在拖动的行为异常并带有错误。
这里是codesandbox,上面已说明了两种选择