динамический обратный отсчет строк таблицы с vuejs

jsfiddle

В vuejs, таблица, у меня есть обратный отсчет с обратным отсчетом в таблице, где я перечисляю данные, но я не могу запустить множественный обратный отсчет в строках таблицы отдельно в каждой строке, я открыл документ jsfiddle для этого процесса выше, я был бы очень рад, если вы посмотри на би. заранее спасибо ...

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

  }
})

javascript vue.js quasar-framework
person aykilic    schedule 28.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот один из способов сделать это: 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)
  }
})
person Phil    schedule 29.08.2019
comment
Отлично, пожалуйста, отметьте ответ как принятый, чтобы другие не тратили на него время. - person Phil; 29.08.2019