Within vuejs, I have a table with countdown functionality for listing data. However, I'm facing an issue where I cannot initiate multiple countdowns in separate rows of the table. To illustrate this problem further, I have created a jsfiddle demonstration linked above. Your insights and assistance on this matter would be greatly appreciated. Thank you in advance.
new Vue({
el: '#q-app',
data: function () {
let now = new Date();
return {
countdown: null,
data: [
{
name: 'calories',
calories: 159,
fat: 6.0,
carbs: 24,
tarih: "2020-11-11"
},
{
name: 'fat',
calories: 237,
fat: 9.0,
carbs: 37,
tarih: "2020-11-11 11:00"
},
{
name: 'carbs',
calories: 518,
fat: 26.0,
carbs: 65,
tarih: "2020-11-11 11:00"
},
{
name: 'protein',
calories: 305,
fat: 3.7,
carbs: 67,
tarih: "2019-07-11 11:00"
}
],
// date:moment(now).format('YYYY-MM-DD HH:mm'),
columns: [
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'tarih', label: 'Protein (g)', field: row => {
let datem = moment(row.tarih).format('YYYY-MM-DD HH:mm')
let selfi = this;
setInterval(function () {
selfi.countdown=countdown(new Date(datem).getTime());
}, 1000);
}
},
],
}
},
methods:{
},
mounted(){
}
})