Как вызвать / принудительно обновить компонент Svelte - PullRequest
Новая
       6

Как вызвать / принудительно обновить компонент Svelte

0 голосов
/ 04 июля 2019

Я пытаюсь разобраться с реактивностью svelte 3 ...

  1. Я хотел принудительно обновить пользовательский интерфейс одним нажатием кнопки.Я использую пользовательский компонент AsyncFetcher, который принимает HTTP-данные поста и возвращает объект data (результат HTTP-поста) для своего слота.

  2. Я хотел отключить функцию.Поэтому, когда нажимается кнопка «Отключить», вызывается http api с последующим обновлением представления данных. 

<script>
    export let id

    function onDisable() {
        fetch('disable-api-url', {id: id})
        // Then ??
        // What to do after the fetch call, to refresh the view
    }
</script>

<AsyncFetcher postParam={id} let:data>
    {data.name}

    <button on:click={??}>Refresh</button>
    <button on:click={onDisable}>Disable Item</button>
</AsyncFetcher>

Я попытался сделать on:click={() => id=id}, чтобы обмануть его, чтобы обновить добезрезультатно.Если бы id был бы объектом, а не строкой, id={...id} сработал бы, что, к сожалению, здесь не так.

Каков правильный путь для достижения этой цели?

1 Ответ

2 голосов
/ 04 июля 2019

Использование компонента для управления выборками очень нетрадиционно. Обычно вы выбираете данные внутри onMount или в обработчике событий: 

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

  let initialData;
  let otherData;

  onMount(async () => {
    const res = await fetch('some-url');
    initialData = await res.json();
  });

  async function update() {
    const res = await fetch('some-other-url');
    otherData = await res.json();
  }
</script>

{#if initialData}
  <p>the data is {initialData.something}</p>
{/if}

<button on:click={update}>update</button>
...