// Created by Emoji FanBoy Vue.component("challenger", { props: ["challenge"], template: `

{{this.$root.topic_maker(challenge.topic)}} – {{this.$root.difficulty_maker(challenge.difficulty-1)}}

` }); Vue.component("topic-filter", { props: { topic: { required: true, type: String }, }, /* DC: This is the only VueJS Documentation I've reviewed so far . - https://vuejs.org/v2/guide/events.html I implemented an onChange handle for the input checkbox. However, you need to read all selected values and unselected values before rebuilding the topics array. */ methods: { onChange: (event) => { console.log(event.target.value) /*DC: The current problem with this filter is it appears that the actual input checkboxes are bound to the topics. So, this logic I added will need to be reworked. See the template change I made below: Before: $emit("input",$event.target.topic) After: v-on:input='onChange' My guess is the $emit function would work if there was a listener function for it. However,if need to research this further. */ this.content.topics = this.content.topics .filter( t => t != event.target.value ) } }, template: ` {{topic}}
` }); Vue.component("difficulty-filter", { props: { difficulty:{ required: true, type: String, }, }, template: ` {{difficulty}}
` }); //DC: I'm pretty sure there is a better way than to set this global. var content; window.onload = () => { content = new Vue({ el: "#main-content", data:{ check_maker: function(topiculty){ return topiculty+"-checked" }, link_maker: function(linkInt){ return "https://www.sololearn.com/post/"+linkInt+"/ref?app" }, topic_maker: function(topicInt){ return this.topics[topicInt] }, difficulty_maker: function(difficultyInt){ return this.difficulties[difficultyInt] }, topiculties: [], difficulties: [ "Beginner", "Easy", "Average", "Spicy", "Nightmare", ], topics: [ "Calculus", "Geometry", "Trigonometry", "Algebra", "Physics", "Calculus + Geometry", "Geometry + P&C", "Numerical Analysis", ], challenges: [ {link: 26130,topic: 0,difficulty: 4,id: 1,}, {link: 27255,topic: 1,difficulty: 3,id: 2,}, {link: 29184,topic: 1,difficulty: 5,id: 3,}, {link: 31664,topic: 1,difficulty: 4,id: 4,}, {link: 33266,topic: 1,difficulty: 5,id: 5,}, {link: 34948,topic: 0,difficulty: 4,id: 6,}, {link: 36688,topic: 0,difficulty: 3,id: 7,}, {link: 38276,topic: 0,difficulty: 4,id: 8,}, {link: 39841,topic: 3,difficulty: 3,id: 9,}, {link: 41311,topic: 0,difficulty: 3,id: 10,}, {link: 42979,topic: 2,difficulty: 3,id: 11,}, {link: 44612,topic: 2,difficulty: 2,id: 12,}, {link: 46129,topic: 4,difficulty: 2,id: 13,}, {link: 47646,topic: 0,difficulty: 3,id: 14,}, {link: 49102,topic: 0,difficulty: 2,id: 15,}, {link: 50514,topic: 0,difficulty: 2,id: 16,}, {link: 51930,topic: 1,difficulty: 4,id: 17,}, {link: 55243,topic: 0,difficulty: 4,id: 18,}, {link: 58424,topic: 3,difficulty: 2,id: 19,}, {link: 60107,topic: 6,difficulty: 3,id: 20,}, {link: 61748,topic: 0,difficulty: 3,id: 21,}, {link: 63514,topic: 5,difficulty: 4,id: 22,}, {link: 65037,topic: 7,difficulty: 3,id: 23,}, {link: 66737,topic: 1,difficulty: 3,id: 24,}, {link: 68515,topic: 1,difficulty: 2,id: 25,}, {link: 70405,topic: 1,difficulty: 4,id: 26,}, {link: 72212,topic: 0,difficulty: 3,id: 27,}, {link: 74480,topic: 0,difficulty: 5,id: 28,}, {link: 76976,topic: 0,difficulty: 4,id: 29,}, {link: 79248,topic: 1,difficulty: 2,id: 30,}, {link: 82451,topic: 1,difficulty: 2,id: 31,}, {link: 85028,topic: 4,difficulty: 1,id: 32,}, {link: 87901,topic: 4,difficulty: 1,id: 33,}, ], }, }); content.topiculties = content.topiculties.concat(content.topics.concat(content.difficulties)); content.topiculties.shift(); }

Vue Code by Emoji Fanboy