{"_path":"/knowledge-base/laravel-filtered-list-blade-vue","_draft":false,"_partial":false,"_empty":false,"title":"Laravel: Filtered List with Blade & Vue","description":"Build a reactive filtered list with Blade & Vue","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"laravel-filtered-list-with-blade--vue"},"children":[{"type":"text","value":"Laravel: Filtered List with Blade & Vue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Build a reactive filtered list with Blade & Vue"}]},{"type":"element","tag":"h2","props":{"id":"prepare-your-blade-template"},"children":[{"type":"text","value":"Prepare your blade template"}]},{"type":"element","tag":"code","props":{"code":"@bot\n    // static contant goes here...\n@else\n    <div id=\"filter\"></div>\n@endbot\n","language":"php"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@bot\n    // static contant goes here...\n@else\n    <div id=\"filter\"></div>\n@endbot\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-app"},"children":[{"type":"text","value":"The Vue-App"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your app consists of two files, the entry-point "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"post-filter/index.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"import Vue from 'vue';\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);\n\nconst App = { template: '<div id=\"filter\"><router-view /></div>' };\n\nconst router = new VueRouter({\n    mode: 'history',\n    routes: [\n        {\n            path: '/filter/:categories?',\n            name: 'filter',\n            component: () => import('./Filter'),\n            props(route) {\n                const categories = route.params.categories?.toString() || null;\n                return {\n                    categories: categories ? categories.split(',') : [],\n                };\n            },\n        },\n    ],\n});\n\nconst app = new Vue({\n    render: (h) => h(App),\n    router,\n}).$mount('#filter');\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Vue from 'vue';\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);\n\nconst App = { template: '<div id=\"filter\"><router-view /></div>' };\n\nconst router = new VueRouter({\n    mode: 'history',\n    routes: [\n        {\n            path: '/filter/:categories?',\n            name: 'filter',\n            component: () => import('./Filter'),\n            props(route) {\n                const categories = route.params.categories?.toString() || null;\n                return {\n                    categories: categories ? categories.split(',') : [],\n                };\n            },\n        },\n    ],\n});\n\nconst app = new Vue({\n    render: (h) => h(App),\n    router,\n}).$mount('#filter');\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"and the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"post-filter/Filter.vue"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"<template>\n    <div>\n        <label>\n            <input type=\"checkbox\" value=\"1\" v-model=\"categories\" />\n            Category 1\n        </label>\n        <label>\n            <input type=\"checkbox\" value=\"2\" v-model=\"categories\" />\n            Category 2\n        </label>\n        <transition-group\n            name=\"list-complete\"\n            class=\"flex flex-row flex-wrap w-full list-complete\"\n            tag=\"section\"\n        >\n            <div\n                v-for=\"post in posts\"\n                :key=\"post.id\"\n                class=\"w-1/3 p-5 transition-transform duration-200\"\n            >\n                <h3 class=\"text-xl\">{{ post.title }}</h3>\n                {{ post.body }}\n            </div>\n        </transition-group>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'PostFilter',\n    props: {\n        /**\n         * We get an array with categories from the router.\n         * It is a representation of the categories from the route param.\n         */\n        categories: {\n            type: Array,\n        },\n    },\n    data() {\n        return {\n            posts: [],\n        };\n    },\n    /**\n     * The mounted hook will only get called once.\n     * A route change of the vue router will not affect this hook.\n     */\n    mounted() {\n        this.getPosts();\n    },\n    watch: {\n        /**\n         * Whenever the list of categories changes, we need to redirect\n         * with the new route params.\n         */\n        sortedCategories(val) {\n            // make a string from the sorted array [1,2] => '1,2'\n            // or set to null if empty\n            let categories = this.sortedCategories.join(',') || null;\n\n            // check if the params differ to prevent double route hits\n            if (this.$route.params.categories != categories) {\n                // go to filter route with new params\n                this.$router.push({\n                    name: 'filter',\n                    params: {\n                        categories,\n                    },\n                });\n                // fetch a filtered set of posts\n                this.getPosts();\n            }\n        },\n    },\n    methods: {\n        async getPosts() {\n            this.posts = await axios.post('/api/enpoint', {\n                query: this.sortedCategories,\n            });\n        },\n    },\n    computed: {\n        sortedCategories() {\n            return this.categories.sort();\n        },\n    },\n};\n</script>\n\n<style scoped>\n.list-complete-enter,\n.list-complete-leave-to {\n    opacity: 0;\n    transform: translateY(0px);\n}\n.list-complete-leave-active {\n    position: absolute;\n}\n</style>\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n    <div>\n        <label>\n            <input type=\"checkbox\" value=\"1\" v-model=\"categories\" />\n            Category 1\n        </label>\n        <label>\n            <input type=\"checkbox\" value=\"2\" v-model=\"categories\" />\n            Category 2\n        </label>\n        <transition-group\n            name=\"list-complete\"\n            class=\"flex flex-row flex-wrap w-full list-complete\"\n            tag=\"section\"\n        >\n            <div\n                v-for=\"post in posts\"\n                :key=\"post.id\"\n                class=\"w-1/3 p-5 transition-transform duration-200\"\n            >\n                <h3 class=\"text-xl\">{{ post.title }}</h3>\n                {{ post.body }}\n            </div>\n        </transition-group>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'PostFilter',\n    props: {\n        /**\n         * We get an array with categories from the router.\n         * It is a representation of the categories from the route param.\n         */\n        categories: {\n            type: Array,\n        },\n    },\n    data() {\n        return {\n            posts: [],\n        };\n    },\n    /**\n     * The mounted hook will only get called once.\n     * A route change of the vue router will not affect this hook.\n     */\n    mounted() {\n        this.getPosts();\n    },\n    watch: {\n        /**\n         * Whenever the list of categories changes, we need to redirect\n         * with the new route params.\n         */\n        sortedCategories(val) {\n            // make a string from the sorted array [1,2] => '1,2'\n            // or set to null if empty\n            let categories = this.sortedCategories.join(',') || null;\n\n            // check if the params differ to prevent double route hits\n            if (this.$route.params.categories != categories) {\n                // go to filter route with new params\n                this.$router.push({\n                    name: 'filter',\n                    params: {\n                        categories,\n                    },\n                });\n                // fetch a filtered set of posts\n                this.getPosts();\n            }\n        },\n    },\n    methods: {\n        async getPosts() {\n            this.posts = await axios.post('/api/enpoint', {\n                query: this.sortedCategories,\n            });\n        },\n    },\n    computed: {\n        sortedCategories() {\n            return this.categories.sort();\n        },\n    },\n};\n</script>\n\n<style scoped>\n.list-complete-enter,\n.list-complete-leave-to {\n    opacity: 0;\n    transform: translateY(0px);\n}\n.list-complete-leave-active {\n    position: absolute;\n}\n</style>\n"}]}]}]}]},"public":true,"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"laravel-filtered-list-with-blade--vue"},"children":[{"type":"text","value":"Laravel: Filtered List with Blade & Vue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Build a reactive filtered list with Blade & Vue"}]},{"type":"element","tag":"h2","props":{"id":"prepare-your-blade-template"},"children":[{"type":"text","value":"Prepare your blade template"}]},{"type":"element","tag":"code","props":{"code":"@bot\n    // static contant goes here...\n@else\n    <div id=\"filter\"></div>\n@endbot\n","language":"php"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"bot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// static contant goes here..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"@else"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"filter\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"endbot"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-app"},"children":[{"type":"text","value":"The Vue-App"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your app consists of two files, the entry-point "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"post-filter/index.js"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"import Vue from 'vue';\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);\n\nconst App = { template: '<div id=\"filter\"><router-view /></div>' };\n\nconst router = new VueRouter({\n    mode: 'history',\n    routes: [\n        {\n            path: '/filter/:categories?',\n            name: 'filter',\n            component: () => import('./Filter'),\n            props(route) {\n                const categories = route.params.categories?.toString() || null;\n                return {\n                    categories: categories ? categories.split(',') : [],\n                };\n            },\n        },\n    ],\n});\n\nconst app = new Vue({\n    render: (h) => h(App),\n    router,\n}).$mount('#filter');\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" Vue "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" VueRouter "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'vue-router'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"Vue."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(VueRouter);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" { template: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'<div id=\"filter\"><router-view /></div>'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"VueRouter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    mode: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'history'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    routes: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            path: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'/filter/:categories?'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            name: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'./Filter'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"categories"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" route.params.categories?."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                    categories: categories "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" categories."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"split"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"','"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"Vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(App),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    router,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"})."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"$mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'#filter'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"and the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"post-filter/Filter.vue"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"<template>\n    <div>\n        <label>\n            <input type=\"checkbox\" value=\"1\" v-model=\"categories\" />\n            Category 1\n        </label>\n        <label>\n            <input type=\"checkbox\" value=\"2\" v-model=\"categories\" />\n            Category 2\n        </label>\n        <transition-group\n            name=\"list-complete\"\n            class=\"flex flex-row flex-wrap w-full list-complete\"\n            tag=\"section\"\n        >\n            <div\n                v-for=\"post in posts\"\n                :key=\"post.id\"\n                class=\"w-1/3 p-5 transition-transform duration-200\"\n            >\n                <h3 class=\"text-xl\">{{ post.title }}</h3>\n                {{ post.body }}\n            </div>\n        </transition-group>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'PostFilter',\n    props: {\n        /**\n         * We get an array with categories from the router.\n         * It is a representation of the categories from the route param.\n         */\n        categories: {\n            type: Array,\n        },\n    },\n    data() {\n        return {\n            posts: [],\n        };\n    },\n    /**\n     * The mounted hook will only get called once.\n     * A route change of the vue router will not affect this hook.\n     */\n    mounted() {\n        this.getPosts();\n    },\n    watch: {\n        /**\n         * Whenever the list of categories changes, we need to redirect\n         * with the new route params.\n         */\n        sortedCategories(val) {\n            // make a string from the sorted array [1,2] => '1,2'\n            // or set to null if empty\n            let categories = this.sortedCategories.join(',') || null;\n\n            // check if the params differ to prevent double route hits\n            if (this.$route.params.categories != categories) {\n                // go to filter route with new params\n                this.$router.push({\n                    name: 'filter',\n                    params: {\n                        categories,\n                    },\n                });\n                // fetch a filtered set of posts\n                this.getPosts();\n            }\n        },\n    },\n    methods: {\n        async getPosts() {\n            this.posts = await axios.post('/api/enpoint', {\n                query: this.sortedCategories,\n            });\n        },\n    },\n    computed: {\n        sortedCategories() {\n            return this.categories.sort();\n        },\n    },\n};\n</script>\n\n<style scoped>\n.list-complete-enter,\n.list-complete-leave-to {\n    opacity: 0;\n    transform: translateY(0px);\n}\n.list-complete-leave-active {\n    position: absolute;\n}\n</style>\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"checkbox\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"1\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"v-model"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"categories\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            Category 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"checkbox\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"2\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"v-model"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"categories\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            Category 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"transition-group"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"list-complete\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"flex flex-row flex-wrap w-full list-complete\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"section\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"post in posts\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA198"}},"children":[{"type":"text","value":":key=\"post.id\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"w-1/3 p-5 transition-transform duration-200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"text-xl\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">{{ post.title }}</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                {{ post.body }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"transition-group"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"export default {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    name: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'PostFilter'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    props: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"/**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         * We get an array with categories from the router."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         * It is a representation of the categories from the route param."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        categories: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            type: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        return {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            posts: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    /**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"     * The mounted hook will only get called once."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"     * A route change of the vue router will not affect this hook."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"     */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    mounted() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"getPosts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    watch: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"/**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         * Whenever the list of categories changes, we need to redirect"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         * with the new route params."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"         */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"sortedCategories"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(val) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// make a string from the sorted array [1,2] => '1,2'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// or set to null if empty"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            let categories "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".sortedCategories."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"','"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// check if the params differ to prevent double route hits"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" (this.$route.params.categories != "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"categories"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// go to filter route with new params"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".$router."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                    name: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                    params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                        categories,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8B949E"}},"children":[{"type":"text","value":"// fetch a filtered set of posts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"getPosts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    methods: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        async "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"getPosts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            this.posts "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" axios."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'/api/enpoint'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                query: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".sortedCategories,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    computed: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"sortedCategories"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            return this.categories.sort();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".list-complete-enter,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".list-complete-leave-to {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    opacity: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    transform: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"translateY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(0px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":".list-complete-leave-active {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    position: absolute;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"prepare-your-blade-template","depth":2,"text":"Prepare your blade template"},{"id":"the-vue-app","depth":2,"text":"The Vue-App"}]}},"_type":"markdown","_id":"content:04.knowledge-base:laravel-filtered-list-blade-vue.md","_source":"content","_file":"04.knowledge-base/laravel-filtered-list-blade-vue.md","_extension":"md"}