Svelte: Data or Store references are not updated correctly inside directive

[hrj]

Consider the following example:

<ul>
{#each plans as plan, idx}
  <li on:click="changePlan(idx)" class:selected="planIdx == idx">{plan.title}</li>
{/each}
</ul>

<script>
  export default {
    data() {
      return {
        planIdx: 0,
        plans: [{ title: "Plan 1" }, { title: "Plan 2" }]
      };
    },
    methods: {
      changePlan(idx) {
        console.log("changing plan to", idx);
        this.set({planIdx: idx});
      }
    }
  }
</script>

<style>
.selected {
  font-weight: bold;
}
</style>

After clicking on Plan2, it should be highlighted, but it is not. Tested with 2.13.15 and 2.14.2.

The above example uses data but the same bug is found with store as well.

If one of the data elements is part of the rendered HTML, then everything works fine. For example, if we change the HTML above to:

<li on:click="changePlan(idx)" class:selected="planIdx == idx">{plan.title} {planIdx}</li>

then everything works fine.

[PaulMaly]

@hrj Hi, please, use “keyed each” for quick workaround. I’m not sure is this correct behavior or not.

[mrkishi]

I don't believe this is correct behavior. Keyed or not, the final DOM should be the same.

The difference between the keyed and non-keyed version is that the non-keyed will just reuse whatever's already on the DOM regardless of its current state.

[PaulMaly]

@mrkishi Yes, agree. Seems it's "class"-directive specific issue. @jacwright What do you think?

[hrj]

@PaulMaly It's not specific to class directive. In my project, I encountered the issue in an on:click directive.

[stalkerg]

can somebody make REPL?

[hrj]

@stalkerg The example can be tested when copy-pasted to REPL. (I didn't save it there because REPL asks for too many Github permissions like "read and write secret gists".)

[Rich-Harris]

The each block doesn't recognise planIdx as a dependency, only plans. Working on a fix

[Rich-Harris]

Fixed in 2.14.3

[hrj]

:tada:
Thanks; I tested that the fix works even for dependencies in on:click directive.

[PaulMaly]

@hrj I meant that you still were able to switch classes without class-directive.