Search code examples
javascriptloopsvue.jsvuejs2v-for

Filter v-for array to return specific IDs only -Vue.js

I am trying to loop through an array with v-for but I need to list specific IDs only. I've tried this code so far

<template>
    <div v-for="item in Items" v-if="item.id === '1,4,9,44,98'" :item="item" :key="item.id">{{ item.name }}</div>
</template>

<page-query>
  query {
    items {
       id
       name
    }
  }
</page-query>

<script>
    export default {
        props: {
          items: Array,
        }
        computed: {
          Items() {
            return this.items
          },
        }
    }
</script>

How can I list specific IDs using v-for and v-if in this example?

Solution

  • well, you can do the filtering in the computed section where you are returning the items props:

     computed: {
          Items() {
            return this.items.filter((item,index)=>{return index>0 && index<5})
          }
        }

    then what you will have as items is the original filtered items