I'm sure this worked in the past and wasn't complicated so I'm not sure what's going wrong with this filtering in Vue3:

<script setup>
    import { ref } from 'vue'

    const faqs = [
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. General',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat1',
        },
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Advice',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat2',
        },
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Personal Loan',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat3',
        }
    ]

    const filteredFaqs = ref(faqs)

    const filtering = (e) => {
        const filterValue = e.target.value.toLowerCase()
        console.log('category being filtered:', filterValue)
        filteredFaqs.value = faqs.filter(faq => faq.category.toLowerCase().includes(filterValue))
    }
</script>

<template>

  <div class="tagFilters">
      <button id="cat1" name="cat1" value="cat1" @click="(e) => filtering(e)">cat1</button> 
      <button id="cat2" name="cat2" value="cat2" @click="(e) => filtering(e)">cat2</button> 
      <button id="cat3" name="cat3" value="cat3" @click="(e) => filtering(e)">cat3</button> 
  </div>
  
  <div class="faqList">
    <div class="accordions">
        <div class="accordion" v-for="(faq, index) in faqs" :id="faq.category" :key="index + 1">
            <input type="checkbox" :id="'faq' + (index + 1)">
            <label :for="'faq' + (index + 1)" class="accordionHeader" :id="'faq' + (index + 1)"><h4>{{ faq.question }}</h4></label>
            <div class="accordionContent">
                <p>
                    {{ faq.answer }}
                </p>
            </div>
        </div>
    </div>
  </div>
  
</template>

I'm sure this worked in the past and wasn't complicated so I'm not sure what's going wrong with this filtering in Vue3:

<script setup>
    import { ref } from 'vue'

    const faqs = [
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. General',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat1',
        },
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Advice',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat2',
        },
        {
            question: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Personal Loan',
            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonummy nibh euismod tincidunt. Cras dapibus. Vestibulum vel diam id diam sagittis rutrum. Donec vel neque at neque viverra tincidunt. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer euismod, ligula et volutpat malesuada.',
            category: 'cat3',
        }
    ]

    const filteredFaqs = ref(faqs)

    const filtering = (e) => {
        const filterValue = e.target.value.toLowerCase()
        console.log('category being filtered:', filterValue)
        filteredFaqs.value = faqs.filter(faq => faq.category.toLowerCase().includes(filterValue))
    }
</script>

<template>

  <div class="tagFilters">
      <button id="cat1" name="cat1" value="cat1" @click="(e) => filtering(e)">cat1</button> 
      <button id="cat2" name="cat2" value="cat2" @click="(e) => filtering(e)">cat2</button> 
      <button id="cat3" name="cat3" value="cat3" @click="(e) => filtering(e)">cat3</button> 
  </div>
  
  <div class="faqList">
    <div class="accordions">
        <div class="accordion" v-for="(faq, index) in faqs" :id="faq.category" :key="index + 1">
            <input type="checkbox" :id="'faq' + (index + 1)">
            <label :for="'faq' + (index + 1)" class="accordionHeader" :id="'faq' + (index + 1)"><h4>{{ faq.question }}</h4></label>
            <div class="accordionContent">
                <p>
                    {{ faq.answer }}
                </p>
            </div>
        </div>
    </div>
  </div>
  
</template>

It might just be something simple I overlooked but can anyone help me to understand why it's not filtering?

When the filter buttons are clicked the console log returns the intended value , and if I console log what's returned in filteredFaqs.value I can also see the correct items in the array being returned depending on which filter button is clicked.

• vue.js
• filter
• vuejs3
• v-for

Share Improve this question Follow asked Nov 18, 2024 at 13:47 ChobbitChobbit 65455 silver badges1717 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I've already found my answer, it's because my for loop was referencing the original static array and not the reactive one I've cloned.

So the v-for="(faq, index) in faqs" should have been: v-for="(faq, index) in filteredFaqs"

I knew it would have been something simple I just missed.