Javascript 使用vuejs对表行进行动态倒计时

在vuejs表中，我在列出数据的表中有倒计时，但我不能在每一行中分别在表行中启动多个倒计时，我打开了一个用于上述过程的JSFIDLE文档，如果您查看bi，我将非常高兴。先谢谢你

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(){

  }
})

---

以下是一种方法：

基本上，我为每一行设置一个倒计时字段。然后，我使用setInterval定期更新这些值

newvue({
el:“#q-app”，
道具：[
“datam”
],
数据：函数（）{
返回{
数据：[
{
名称：“卡路里”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
塔里赫：“2020-11-11”，
钠：87，
钙：“14%”，
铁：1%，
倒计时：空，
},
{
名字：“胖”，
卡路里：237，
fat:9.0，
碳水化合物：37，
塔里赫：“2020-11-11:00”，
钠：129，
钙：“8%”，
铁：1%，
倒计时：空，
},
{
名称：“碳水化合物”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
塔里赫：“2020-11-11:00”，
钠：54，
钙：“12%”，
铁：6%，
倒计时：空，
},
{
名称：'蛋白质'，
卡路里：305，
脂肪：3.7，
碳水化合物：67，
塔里赫：“2020-11-11:00”，
钠：413，
钙：“3%”，
铁：8%，
倒计时：空，
}
],
//日期：时间（现在）。格式（'YYYY-MM-DD HH:MM'），
栏目：[
{name:'carries'，align:'center'，label:'carries'，field:'carries'，sortable:true}，
{name:'fat'，label:'fat（g）'，field:'fat'，sortable:true}，
{名称：'carbs'，标签：'carbs（g）'，字段：'carbs'}，
{名称：'tarih'，标签：'Protein（g'），字段：'countdown'}，
],
}
},
方法：{
更新计数（）{
Object.values（this.data）.forEach（行=>{
设datem=moment（row.tarih）.format（'YYYY-MM-DD HH:MM'）；
row.countdown=倒计时（新日期（datem）.getTime（））.toString（）；
})
}
},
安装的（）{
//在开始时更新一次
this.updateCountdowns（）
//然后每秒钟更新一次
setInterval（this.updateCountdowns，1000）
}
})

太好了，请将答案标记为已接受，这样其他人就不会花时间回答了。