使用 child Svelte 组件中的 <input> 在 App 组件中搜索商店?
Use <input> from child Svelte component to search store in App component?
我设置了一个 Svelte 应用程序,因此有一个应用程序组件、一个图表组件和一个 Header 组件。
App组件拉取数据。图表组件显示数据。
Header 组件有一个 <input>
。我希望能够在该输入中的 Header 组件中输入搜索字符串,并让它过滤 App 组件中的数据。
我还没到。这里是 my work in progress.
现在,我的 App 组件中也有一个 <input>
。那个正确地过滤了我在图表组件中显示的数据。
我只想在 Header 中使用 <input>
。
我找到了如何将 header 输入文本绑定到应用程序,如我的 REPL 中所示,但我如何将该文本用作变量?
非常欢迎大家的帮助。
同样,这里是 REPL。
目前您正在将 header 中的值绑定到商店,而您的 local 搜索输入绑定到 search
,然后您将其用于过滤
<Header bind:value={$store} />
<input bind:value={search}>
但是您实际上并没有对这家商店做任何事情,甚至不确定为什么它是一家商店,因为您在这里不需要那部分。没有什么能阻止您在组件中使用绑定来连接到常规值
<Header bind:value={search}>
我设置了一个 Svelte 应用程序,因此有一个应用程序组件、一个图表组件和一个 Header 组件。
App组件拉取数据。图表组件显示数据。
Header 组件有一个 <input>
。我希望能够在该输入中的 Header 组件中输入搜索字符串,并让它过滤 App 组件中的数据。
我还没到。这里是 my work in progress.
现在,我的 App 组件中也有一个 <input>
。那个正确地过滤了我在图表组件中显示的数据。
我只想在 Header 中使用 <input>
。
我找到了如何将 header 输入文本绑定到应用程序,如我的 REPL 中所示,但我如何将该文本用作变量?
非常欢迎大家的帮助。
同样,这里是 REPL。
目前您正在将 header 中的值绑定到商店,而您的 local 搜索输入绑定到 search
,然后您将其用于过滤
<Header bind:value={$store} />
<input bind:value={search}>
但是您实际上并没有对这家商店做任何事情,甚至不确定为什么它是一家商店,因为您在这里不需要那部分。没有什么能阻止您在组件中使用绑定来连接到常规值
<Header bind:value={search}>