I am building a component using Svelte in which you have a list of words and you have to arrange them in the correct order by dragging the words to the answer section, for this I am using SortableJS.
To store the answer and the words you can use I use svelte stores and everything works correctly. Now, I am trying to do the same but with an ʻonClick` event. But I have a bug where the store values are updated but the view does not.
To show the options and the answers I am doing this:
<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>
and if I replace the get
in {#each get (answer) as chip, index}
with $answer
, the ʻonClick` event works but now the drag behaves strangely and with bugs.
Here is a codesandbox with both of the alternatives explained above