Vue Js Category Filter

Question

I am trying to implement a Vue.js application that allows you to filter custom post types by their category. Certain post types live in more than one category. I have successfully implemented the ability for the custom posts to filter when only part of a single category but unable to figure out the correct away to properly storing the category types as an array of types instead of a string of types. While also updating the computed property to check if the selected type is in the javascript array of objects.

Below is my loop through each custom post & App.js file beneath that:

/******************************************
Gallery of Custom Posts.php
********************************************/

<script>    
var sites = [ 
        <?php foreach ( $projects as $project) : ?> 
        <?php   // VARIABLES
                $storyFeaturedImage = get_field('story_featured_image', $project->ID);
                $storyFeaturedImageURL = $storyFeaturedImage['url']; 
                $storyFeaturedImageAlt = $storyFeaturedImage['alt']; 
                $storyFeaturedImageTitle = $storyFeaturedImage['title']; 
                $storyFeaturedImageCaption = $storyFeaturedImage['caption'];        
                $storyColorPalette =  get_field('story_color_palette', $project->ID); 
                $storyColorPaletteValue = $storyColorPalette['value'];
                $storyCategory = get_the_category($project->ID);
        ?>
            { 

            "title": "<?php echo get_the_title($project->ID);?>",

            "type":  <?php foreach($storyCategory as $specificCategory ) { ?>  <?php
                             echo get_the_category($project->ID); ?> 
                     <?php } ?>,        
            "image": "<?php echo $storyFeaturedImageURL; ?>",
            "themeColor": "<?php echo $storyColorPaletteValue; ?>",
            "link": "<?php the_permalink($project->ID) ?>"
            },  

        <?php endforeach; ?>

];
</script>

/**********************
App.js
******************/




new Vue({
    el: '#app',
    data: {
      storyList: sites,
      type: ''
    },
    methods: {

      filterList: function(){

        this.type = event.target.title;

      }
    },
    computed: {
      uniqueItemsList: function(){
        var types = [];

        this.storyList.forEach((item)=>{

              if(!types.includes(item.type) ){
                types.push(item.type);
              } 

        });

        return types;

      }

    }
  });

Welcome to the Treehouse Community

Looking to learn something new?

Fred Bryant

Fred Bryant

Vue Js Category Filter