Search code examples
bindingcomponentsstoresvelte

Use <input> from child Svelte component to search store in App component?

I have a Svelte app set up so that there's an App component, a Chart component and a Header component.

The App component pulls in data. The Chart component displays the data.

The Header component has an <input>. I want to be able to enter a search string in that input, in the Header component, and have it filter the data that's in the App component.

I'm not there yet. Here is my work in progress.

Right now, I have an <input> in the App component, too. And that one is correctly filtering my data that shows up in the Chart component.

I just want to be able to use the <input> in Header.

I've found how I can bind the header input text to App, as shown in my REPL, but how do I use that text as a variable?

All help very welcome.

Again, here's the REPL.

Solution

  • Currently you are binding the value from the header to a store, while your local search input binds to search, which you then use for filtering

    <Header bind:value={$store} />
<input bind:value={search}>

    But you are actually not doing anything with this store, not even sure why it is a store since you don't need that part here. Nothing stops you from using bind in a component to connect to a regular value

    <Header bind:value={search}>