Блог

Главная - Вопросы по программированию - хороший способ отфильтровать элементы из записываемого хранилища для отображения в svelte?

хороший способ отфильтровать элементы из записываемого хранилища для отображения в svelte?

#svelte-3 #svelte-store

#svelte-3 #svelte-store

Вопрос:

Есть ли лучший способ сделать это?

 <script>
    import recipeStore from '../../recipeStore';
    export let id;  /* I got this id from the url param */
</script>

<div>
    {#each $recipeStore as recipe }
        {#if recipe.id == id}
        <p>{recipe.name}</p>
        {/if}
    {/each}    
</div>

Спасибо!

Ответ №1:

Вы можете отфильтровать данные хранилища внутри тега script:

 <script>
  import {counts} from "./store.js"
  let id=0;
  let mycounts
  const filt=(value)=>{
    mycounts=$counts.filter(count => count.id == id);
    console.log("mycounts: ",mycounts)
  }
  $: filt(id)
</script>

Вы можете использовать $: для наблюдения за изменением переменной. В моем примере при id изменении filt(id) вызывается функция.

Вот REPL: https://svelte.dev/repl/77f92f3d3ca149dfa5475035cbbffeb5?version=3.29.0

Комментарии:

1. Это не сработает для меня, мне нужно фильтровать данные хранилища без вызова пользователем функции, я хотел бы запустить эту функцию фильтрации без взаимодействия с пользователем, есть идеи? Например, мне нужно захватить элемент из массива в хранилище-данные при загрузке страницы, чтобы сразу отобразить правильный элемент при загрузке страницы. есть идеи?

2. Это был просто пример фильтрации, и он будет работать так же, если вы измените идентификатор компонента верхнего уровня или после создания компонента ( onMount ) . Вот новый REPL: svelte.dev/repl/77f92f3d3ca149dfa5475035cbbffeb5?version= 3.29.0

3. Спасибо за ответ, но вы видите, в вашем примере, я попытался отобразить значение текстового от выбранного идентификатора, но это не сработало (у тебя стройный файл, я обновил последнюю строку, чтобы попытаться вывести значение свойства text идентификатор:2, но выход не определен.. <script> import {counts} from «./store.js» import {onMount} from «svelte» export let id; onMount(()=>{ id=2 }) let mycounts const filt=(value)=>{ mycounts=$counts. фильтр (количество => count.id == идентификатор); console.log(«mycounts: «,mycounts) } $: filt(id) </script> <h1>идентификатор:{id} {mycounts.text}</h1>

4. Фильтр возвращает массив, поэтому вам нужно получить доступ к его свойствам с [] помощью like mycounts[0].text , вы также должны проверить, возвращает ли filter пустой массив ie. идентификатор не найден. Если возвращаемый массив пуст, вы должны инициализировать его if(mycounts.length==0) mycounts=[{text:""}] , потому что вы не можете получить доступ к пустому массиву с mycount[0].text помощью I have updated REPL.

5. И вы также можете обновить обычную text переменную после фильтрации, например text = mycounts.length==0 ? "" : mycounts[0].text , или использовать обычный объект, например myobj = mycounts.length==0 ? {text:””} : mycounts[0]