Untitled

<template>
  <div>
    <v-tabs
      v-model="tab"
      background-color="blue-grey darken-2"
      center-active
      dark
      class="mb-5">
      <v-tab>All</v-tab>
      <v-tab 
        v-for="category in categories" 
        :key="category"
        >
        {{ category }}
      </v-tab>
      <v-tab-item v-for="(category,index) of categories" :key="index">
        <v-container>
          <v-row>
            <v-col md="6" v-for="item in websites" :key="item">
              <div class="holder">
                <v-img :src="item.img" class="image"></v-img>
                <div class="middle">
                  <v-btn style="text-transform:none" rounded class="cyan white--text pa-5" large>Select</v-btn>
                  <v-btn style="text-transform:none" rounded outlined large color="grey lighten-4">Demo</v-btn>
                </div>
              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-tab-item>
    </v-tabs>
  </div>
</template>
<script>
export default{
  name: 'MyWebsitesPage',
  data(){
    return {
      tab: null,
      categories: [
        'Profile', 'Landing', 'Form', 'Portfolio', 'Sectioned',
      ],
      websites: [
        {
          category: 'profile',
          img: 'https://images.unsplash.com/photo-1569317002804-ab77bcf1bce4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80'
        },
        {
          category: 'profile',
          img: 'https://images.unsplash.com/photo-1525789351284-e1e7de240152?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=873&q=80'
        },
        {
          category: 'landing',
          img: 'https://images.unsplash.com/photo-1569317002804-ab77bcf1bce4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80'
        },
        {
          category: 'profile',
          img: 'https://images.unsplash.com/photo-1625467769506-8742f12fb865?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80'
        },
        {
          category: 'form',
          img: 'https://images.unsplash.com/photo-1625467770380-b72df83b624d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80'
        },
      ]
    }
  },
  computed:{
    filterByCategory(){
      return this.websites.filter((website) => {
        return website.category.includes(this.tab)
      })
    }
  }
}
</script>