[Vuejs]-Filter vcard by the specfic name in vuejs

by

1👍

✅

You have to have a attribute in each item to filter it.

And compare cases with v-if

<template>
    <div>
        <div id="filters">
            <button @click="setFilter('A')">A</button>
            <button @click="setFilter('B')">B</button>
            <button @click="setFilter('C')">C</button>
        </div>
        <div v-for="item in items" :key="item.id" v-if="filter===item.filter || filter==='ALL'">
            {{item.id}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [
                {
                    id: 1,
                    filter: 'A'
                },
                {
                    id: 2,
                    filter: 'B'
                }
            ],
            filter: 'ALL'
        }
    },
    methods: {
        setFilter(filterName) {
            this.filter = filterName
        }
    }
}
</script>
👤MotemaddeN

0👍

You need to use filter(), based on your clicked button

Please check below working code snippet 

const projects = [{
    ids: '5',
    cate: 'Technical',
    title: 'Top 10 Australian beaches',
    date: 'November 10',
    name: 'Whitehaven Beach',
    place: 'Whitsunday Island, Whitsunday Islands',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg'
  },
  {
    ids: '5',
    cate: 'Sports',
    title: 'Top 10 Australian beaches',
    date: 'November 21',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
  },
  {
    ids: '1',
    cate: 'Music',
    title: 'Top 10 Australian beaches',
    date: 'December 22',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
  },
  {
    ids: '2',
    cate: 'Creative',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
  },
  {
    ids: '5',
    cate: 'Sports',
    title: 'Top 10 Australian beaches',
    date: 'November 25',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
  },
  {
    ids: '1',
    cate: 'Music',
    title: 'Top 10 Australian beaches',
    date: 'November 22',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
  },
  {
    ids: '1',
    cate: 'Adventure',
    title: 'Top 10 Australian beaches',
    date: 'November 12',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
  },
  {
    ids: '5',
    cate: 'Sports',
    title: 'Top 10 Australian beaches',
    date: 'December 23',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
  },
  {
    ids: '1',
    cate: 'Music',
    title: 'Top 10 Australian beaches',
    date: 'November 17',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
  },
  {
    ids: '1',
    cate: 'Adventure',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
  },
  {
    ids: '5',
    cate: 'Sports',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
  },
  {
    ids: '1',
    cate: 'Music',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
  },
  {
    ids: '2',
    cate: 'Creative',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
  },
  {
    ids: '5',
    cate: 'Sports',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'
  },
  {
    ids: '1',
    cate: 'Music',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'
  },
  {
    ids: '2',
    cate: 'Creative',
    title: 'Top 10 Australian beaches',
    date: 'November 20',
    name: 'Whitehaven Beach',
    place: 'Block 15, Near Tuck Shop',
    sorce: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg'
  },
];

new Vue({
  el: '#app',
  methods: {
    filter(event){
    if(event.target.innerText.toLowerCase() != 'all'){
    console.log(this.projects.filter(({cate})=>cate.toLowerCase() == event.target.innerText.toLowerCase()));
    }  else{console.log(this.projects)}
    }
  },
  data: {
    projects:projects
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">


  <button @click="filter($event)" class="ma-2" outlined color="indigo">All</button>
  <button @click="filter($event)" class="ma-2" outlined color="indigo">Adventure</button>
  <button  @click="filter($event)" class="ma-2" outlined color="indigo" @click="filter($event)" >Creative</button>
  <button class="ma-2" outlined color="indigo" @click="filter($event)" >Entertainment</button>
  <button @click="filter($event)" class="ma-2" outlined color="indigo">Startups</button>
  <button @click="filter($event)" class="ma-2" outlined color="indigo">Gaming </button>
  <button @click="filter($event)" class="ma-2" outlined color="indigo">Technical</button>
  <button class="ma-2" outlined color="indigo" @click="filter($event)">Sports</button>

</div>
👤Narendra Jadhav

Leave a comment