使用 vuejs 在 table 行上进行动态倒计时

Question

在 vuejs 中，table，我在列出数据的 table 中进行了倒计时，但我无法在每一行中分别在 table 行中开始多个倒计时，上面这个过程我打开了一个jsfiddle文档，如果你看看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(){

  }
})

Answer 1

这是一种方法：https://jsfiddle.net/fzr36qwc/1/

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

new Vue({
  el: '#q-app',
  props:[
  'datam'
  ],
  data: function () {
    return {
      data: [
        {
          name: 'calories',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          tarih: "2020-11-11",
          sodium: 87,
          calcium: '14%',
          iron: '1%',
          countdown: null,
        },
        {
          name: 'fat',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          tarih: "2020-11-11 11:00",
          sodium: 129,
          calcium: '8%',
          iron: '1%',
          countdown: null,
        },
        {
          name: 'carbs',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          tarih: "2020-11-11 11:00",
          sodium: 54,
          calcium: '12%',
          iron: '6%',
          countdown: null,
        },
        {
          name: 'protein',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          tarih: "2020-11-11 11:00",
          sodium: 413,
          calcium: '3%',
          iron: '8%',
          countdown: null,
        }
      ],
      // 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: 'countdown'},
      ],
    }
  },
  methods:{
    updateCountdowns() {
      Object.values(this.data).forEach(row => {
        let datem = moment(row.tarih).format('YYYY-MM-DD HH:mm');
        row.countdown = countdown(new Date(datem).getTime()).toString();
      })
    }
  },
  mounted(){
    // Update once at the beginning
    this.updateCountdowns()
    // Then update each second
    setInterval(this.updateCountdowns, 1000)
  }
})

使用 vuejs 在 table 行上进行动态倒计时

dynamic countdown on table rows with vuejs

javascript

vue.js

quasar-framework