Vue.component("challenger", { props: { "challenge": { //object with link,topic and difficulty type: Object, required: true } }, computed: { challengeLink: function(){ return "https://www.sololearn.com/post/"+this.challenge.link.toString()+"/ref?app" } }, methods:{ topic_maker: function(topicInt){ return this.$root.topics[topicInt] }, difficulty_maker: function(difficultyInt){ return this.$root.difficulties[difficultyInt] }, }, template: `

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

` }); Vue.component("topic-filter", { inheritAttrs: false, props: { topic: { required: true, type: String }, }, methods: { pushpop: function(evev){ topiculties = this.$root.topiculties; if(!topiculties.has(evev)){ topiculties.add(evev) } else{ topiculties.delete(evev) } this.$root.topiculties = new Set([...topiculties]) } }, template: ` {{topic}}
` }); Vue.component("difficulty-filter", { inheritAttrs: false, props: { difficulty:{ required: true, type: String, }, }, methods: { pushpop: function(evev){ topiculties = this.$root.topiculties; if(!topiculties.has(evev)){ topiculties.add(evev) } else{ topiculties.delete(evev) } this.$root.topiculties = new Set([...topiculties]) } }, template: ` {{difficulty}}
` }); window.onload = () => { var content = new Vue({ el: "#main-content", data:{ topiculties: new Set(), //difficulties,topics and challenges are static array //I mean no other use than iterating over them or returning value from index difficulties: [ "Beginner", "Easy", "Average", "Spicy", "Nightmare", ], topics: [ "Calculus", "Geometry", "Trigonometry", "Algebra", "Physics", "Calculus + Geometry", "Geometry + P&C", "Numerical Analysis", ], challenges: [ //link-topic(index)-difficulty(1-5) //topic is per index of topics array //while difficulty is index+1 {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 = new Set([...content.topics,...content.difficulties]) }

set