Nuxt•8mo ago

Filter await useFetch

Hi I am new to Nuxt and all the javascript frameworks out there. I am trying to pull data and then filter it on the page. However when I try to run .filter on questions it comes back stating that questions doesn't have a method named .filter() I see that it returns a Ref<SerializedObject> but how would I get this to work as expected?

<script setup lang="ts">
const { data: questions } = await useFetch('/api/faq')
const searchText = ref("")
const filteredQuestions = computed(() => {
    if (searchText.value == "") {
        return questions;
    }

    const t = searchText.value.toLowerCase();
    return questions.filter(item => {
        return item.question.toLowerCase().includes(t) || item.answer.toLowerCase().includes(t);
    });
})
</script>

<script setup lang="ts">
const { data: questions } = await useFetch('/api/faq')
const searchText = ref("")
const filteredQuestions = computed(() => {
    if (searchText.value == "") {
        return questions;
    }

    const t = searchText.value.toLowerCase();
    return questions.filter(item => {
        return item.question.toLowerCase().includes(t) || item.answer.toLowerCase().includes(t);
    });
})
</script>

4 Replies

manniL•8mo ago

questions is a ref so you have to use questions.value Also be aware that questions can be null in case of an error. You should see that when hovering over the variable.

InsightOP•8mo ago

Even when I have questions.value it shows

InsightOP•8mo ago

I tried that to begin with but when it continued to show an error and wouldn't load the page I tried searching deeper but couldn't find anything ive tried wrapping it in a null check as well.

manniL•8mo ago

question.value?.filter should work fine 😉 also make sure you return questions.value further up

Gaming

Programming

Filter await useFetch