小编Mat*_*Roa的帖子

如何在 svelte 中制作搜索过滤器

我有两个组件在组件树中距离很远,我对如何在两者之间进行通信存有疑问。我有搜索组件、listItems 和商店。

商店.svelte

<script context="module" lang="ts">
 import type {Items} from '../../Models/Items.model';
 import { writable } from 'svelte/store';

 export const dataItems = writable<Items[]>([]);

  const filterInfo = (term:string) => {
     dataItems.update(item => {
           item.filter(x => {
                return x.name.toLowerCase().includes(term.toLowerCase())
                || x.description.toLowerCase().includes(term.toLowerCase());
           })
           return dataItems;
        })
    }*/


export const dispatcher = {filterInfo};

</script>
Run Code Online (Sandbox Code Playgroud)

搜索组件

<script lang="ts">
    import { dispatcher } from './ViewI/store.svelte';
    

    let value:any;

    const handleChange = () => {
     dispatcher.filterInfo(value)
    console.log(value)
     }
    
    
</script>

<Search>
 <input bind:value
 on:input={handleChange}>
</Search>
Run Code Online (Sandbox Code Playgroud)

列表项组件

import type {Items} from …
Run Code Online (Sandbox Code Playgroud)

javascript svelte svelte-component svelte-store

5
推荐指数
1
解决办法
8427
查看次数