Better way to restore svelte function?

Question

<script>
  import { tick } from 'svelte';

  let cnt = 0;
  let tempValueforReset = true;

  const add = () => {
    cnt++;
  };
  
  const reset = async () => {
    tempValueforReset = false;
    await tick();
    tempValueforReset = true;
  };

</script>

{#if tempValueforReset}
  <div contenteditable="true">cnt is '{cnt}' !!</div>
{/if}

<div>
  <button on:click={add}>add</button>
  <button on:click={reset}>reset</button>
</div>

I am using the contenteditable attribute. This allows you to directly edit the content of the webpage. So sometimes it breaks the svelte syntax so it doesn't work anymore.

This is fine. This is the intended situation.

However, in order to recover this again, I am hiding the whole thing and displaying it again. It restores very well. But this doesn't seem like the normal way.

Is there a better regular way?

Answer 1

You could use {#key}, just set the trigger value to a different one, e.g. Date.now().

{#key resetValue}
  <div contenteditable="true">cnt is '{cnt}' !!</div>
{/key}

<button on:click={() => resetValue = Date.now()}>reset</button>