Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Make PastQuestions fetch the questions itself using the mounted method + an interval

Browse source
This commit is contained in:
Oliver-Akins 2020-12-15 21:50:01 -07:00
parent 495533216b
commit 06930d4fe5
1 changed files with 33 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

35
web/src/components/PastQuestions.vue
View file

@ -7,7 +7,7 @@
v-for="questionIndex in 8" v-for="questionIndex in 8"
:key="`question_${questionIndex}`" :key="`question_${questionIndex}`"
> >
Question #{{ questionIndex }} {{ questions[questionIndex - 1] }}
</div> </div>
</div> </div>
</div> </div>
@ -17,8 +17,36 @@
export default { export default {
name: `PastQuestions`, name: `PastQuestions`,
components: {}, components: {},
data() {return {
intervalID: null,
questions: [],
}},
computed: {}, computed: {},
methods: {}, methods: {
requestQuestions() {
console.debug(`Requesting questions for team ${this.$store.state.team}`);
// TODO -> Emit event to server
},
},
sockets: {
TeamQuestions(data) {
console.debug(`Received question data from the server.`);
this.questions = data;
},
},
mounted() {
this.requestQuestions();
this.intervalID = setInterval(
this.requestQuestions,
5000
);
},
beforeDestroy() {
if (this.intervalID != null) {
clearInterval(this.intervalID);
console.debug(`Cleared interval with ID: ${this.intervalID}`);
};
},
} }
</script> </script>
@ -52,7 +80,10 @@ export default {
background-color: var(--board-background); background-color: var(--board-background);
color: var(--board-background-text); color: var(--board-background-text);
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
justify-content: center;
align-items: center;
border-radius: 7px; border-radius: 7px;
display: flex;
margin: 5px; margin: 5px;
width: 40%; width: 40%;
} }