What is the equivalent of attributechangedcallback() in svelte 3 or how to reload my component when i change it’s property

Asked By: Anonymous

I make an app with a nested component, the app call the component when i give an input, the input is the URL and that’s the component property, now i can make the http request and i have my List, but when i change the input (URL) and re-clic nothing happen.

I tried to bind my property (URL), but didn’t work.
I tried beforeUpdate() and after update(), same.. didn’t work.
I tried this “” in my component, didn’t work too.
I tried to destroy my component and create another one with the new value of URL, it works but it’s not a solution..

data.svelte (component)

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();
  }

App Html

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

<div class="list" />

I expect the component be reloaded when i change its property, but when i verify, url is changed but my component don’t reload.

Solution

Answered By: Anonymous

You don’t need to do this for Svelte 3. The url from the input field can be passed as a prop to the Data component. When the input changes in the input field and the button is pressed, updating the prop will trigger the component to query for new data and update affected HTML elements.

I don’t believe they have a v2 to v3 migration guide yet. It may be beneficial to go through the Tutorial so that you get a sense of what has changed.

Here’s a REPL I created showing the process. I use jsonplaceholder to get a particular user (id range 1-10) and display the name, email and json data returned.