vuejs start a timer for every record - vue.js

Question

I have this component rendered, I need to tell the users how much time remaining for each record displayed
I couldn't get anything worked out, I don't know any legible ways to work it out, so just trying calling out methods. I tried child components too but no avail.
<template>
<div>
<ul v-for="question in questions">
{{init_timer(secs)}}
{{start_timer()}}
<li>
{{question.name}}
<span class="question_clock">Validity : -- counter : {{time_remaining}}
</span> </small>
</li>
</ul>
</div>
</template>
<script>
export default {
data: function(){
return {
questions: [],
time_remaining : 1
};
},
methods: {
init_timer: function(secs) {
this.time_remaining = secs
},
start_timer: function() {
console.log('startiem')
setTimeout(function () { this.time_remaining -= 1 }.bind(this), 1000)
},
}
,
created: function(){
$.getJSON('/questions/json', function(response){
this.questions = response
}.bind(this ));
},
}
</script>
any help is much appreciated

Answer 1

I wrote a quick timer component that might accomplish what you want.
Vue.component("timer", {
props: {
interval: {
type: Number,
default: 1
},
initial: {
type: Number
}
},
template: `
<span>{{current}}</span>
`,
data() {
return {
current: this.initial,
timerInterval: null
}
},
methods: {
onInterval() {
this.current = this.current -= this.interval
if (this.current <= 0) {
clearInterval(this.timerInterval)
this.current = 0
}
}
},
mounted() {
setInterval(this.onInterval, this.interval * 1000)
}
})
Basically, you set the initial property which is the time allowed in seconds and the timer will update the DOM every interval seconds.
Here is an example.
console.clear()
const questions = [{
name: "What is your name?",
time: 30
},
{
name: "What is your quest?",
time: 50
},
{
name: "What is your favorite color?",
time: 20
},
{
name: "What is the airspeed velocity of an unladen swallow?",
time: 10
},
]
Vue.component("timer", {
props: {
interval: {
type: Number,
default: 1
},
initial: {
type: Number
}
},
template: `
<span>{{current}}</span>
`,
data() {
return {
current: this.initial,
timerInterval: null
}
},
methods: {
onInterval() {
this.current = this.current -= this.interval
if (this.current <= 0) {
clearInterval(this.timerInterval)
this.current = 0
}
}
},
mounted() {
setInterval(this.onInterval, this.interval * 1000)
}
})
new Vue({
el: "#app",
data: function() {
return {
questions: [],
time_remaining: 1
};
},
created: function() {
setTimeout(() => this.questions = questions, 100)
// $.getJSON('/questions/json', function(response){
// this.questions = response
// }.bind(this ));
},
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="question in questions">
{{question.name}}
<span class="question_clock">
<timer :initial="question.time"></timer>
</span>
</li>
</ul>
</div>