Что является эквивалентом attributechangedcallback () в svelte 3 или как перезагрузить мой компонент при изменении его свойства - PullRequest
Новая
       24

Что является эквивалентом attributechangedcallback () в svelte 3 или как перезагрузить мой компонент при изменении его свойства

0 голосов
/ 13 июня 2019

Я создаю приложение с вложенным компонентом, приложение вызывает компонент, когда я даю ввод, ввод - это URL, и это свойство компонента, теперь я могу сделать запрос http и у меня есть свой список, но когда я изменить вход (URL) и повторно щелкнуть ничего не происходит.

Я пытался связать свою собственность (URL), но не получилось. Я пытался доUpdate () и после обновления (), то же самое .. не работает. Я попробовал это "" в моем компоненте, тоже не сработало. Я попытался уничтожить свой компонент и создать еще один с новым значением URL, он работает, но это не решение ..

data.svelte (компонент) 

export let url;

function getData(){
  const Http = new XMLHttpRequest();
  Http.open("GET", url);
  Http.send();
...
}

App.svelte 

function newdata() {
    Data = new data({
      target: document.querySelector(".list"),
      props: {
        url: "",
      }
    });
  }

onMount(async () => {
    newdata();
  });

  function update() {
    //data.$destroy();
    url_input = document.querySelector("input").value;
    Data.url = url_input;
    //newdata();
  }

Приложение HTML 

<input type="url"/>
<button on:click={update}>Find</button>

<div class="list" />

Я ожидаю, что компонент перезагружается, когда я изменяю его свойство, но когда я проверяю, URL изменяется, но мой компонент не перезагружается.

1 Ответ

0 голосов
/ 14 июня 2019

Вам не нужно делать это для Svelte 3. URL-адрес из поля ввода может быть передан как компонент компонента Data. Когда входные данные изменяются в поле ввода и нажимается кнопка, обновление реквизита заставит компонент запрашивать новые данные и обновлять затронутые элементы HTML.

Я не верю, что у них есть руководство по миграции с v2 на v3. Может быть полезно пройти курс Tutorial , чтобы вы почувствовали, что изменилось.

Вот REPL , который я создал, показывая процесс. Я использую jsonplaceholder, чтобы получить конкретного пользователя (диапазон идентификаторов 1-10) и отображать имя, адрес электронной почты и возвращенные данные json.

...