我第一次使用 Svelte，我試圖弄清楚如何對從 API 檢索到的串列應用過濾。我的 EventsIndex 組件非常簡單，包含以下邏輯：
import FetchPosts from '../services/postsByType'
import EventCard from '../components/EventCard.svelte'
export let post_type
let events = new FetchPosts( post_type ).get()
let currentCategory = 0
function updateCategory( catId ) {
currentCategory = catId
}
一切都按預期作業。
我還使用 await 模板語法來顯示相關資料：
{#await events}
<h1>loading...</h1>
{:then events}
<section class="grid">
{#each events as event}
<EventCard event={event} on:filter={updateCategory}/>
{/each}
</section>
{:catch error}
<p>Something went wrong...</p>
{/await}
缺少的部分是反應式過濾串列。我以為我可以執行以下操作，但它會生成 error events.map is not a function，這是有道理的，因為在呼叫過濾事件時，事件變數將是一個未解決的承諾。
$: filteredEvents = () => {
if (currentCategory === 0) return events
return events.filter( event => {
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
})
}
那么我將如何添加一個反應性的過濾事件函式，我也可以將它包含在我的模板中？
uj5u.com熱心網友回復：
{#each}過濾回圈內的事件應該可以作業。如果過濾器函式像這樣很短，我會行內應用它
{#each events.filter(e => e.id === currentId) as event}
舉個例子。由于在您的情況下，過濾器功能更復雜，因此將其移至功能可能是更好的選擇
filterEvents(events, currentCategory) {
if (currentCategory === 0) return events
return events.filter( event => {
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
})
}
</script>
...
{#each filterEvents(events, currentCategory) as event}
（我想你可以替換這個
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
這樣
event?.categories.some( cat => cat.id === currentCategory )
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/456692.html
上一篇：該流當前正被先前的操作使用