Как группировать и выполнять операции с циклом vue.js

Question

У меня есть массив значений год-месяц с данными из gsheet:

2019 - Mar - 3
2019 - Mar - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 3
2019 - Feb -
2019 - Feb - 2
2019 - Feb - 1
2019 - Feb - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1

Я хочу суммировать итоговые значения за каждый месяц следующим образом:

2019 - Mar - 4
2019 - Feb - 11
2019 - Jan - 4

Этомой код сейчас:

<div class="row" id="list">
  <div v-for="entry in entries" v-if="entry.gsx$regionofincident.$t === 'Mediterranean'">
    <span>{{entry.gsx$reportedyear.$t}} - {{entry.gsx$reportedmonth.$t}} - {{entry.gsx$numberdead.$t}}</span>
  </div>
</div>

Как мне сложить месячные значения?Где я делаю операции?В js или html?

Answer 1

Вы можете использовать вычисленное свойство для фильтрации средиземноморских предметов, а затем использовать Array.prototype.reduce для подсчета результатов:

computed: {
  medEntries() {
    const tally = this.entries
      // only process Mediterranean items
      .filter(entry => entry.gsx$regionofincident.$t === 'Mediterranean')

      // tally results
      .reduce((obj, entry) => {
        const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
        const val = obj[key]
        const numDead = Number(entry.gsx$numberdead.$t || 0)

        if (val) {
          val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
        } else {
          obj[key] = entry
        }
        return obj
      }, {})

    return Object.values(tally)
  }
}

Затем заменить entries в вашем шаблоне с вычисленным именем свойства (medEntries):

<div v-for="entry in medEntries">...</div>

const entry = (year, month, numDead) => ({
  gsx$regionofincident: { $t : 'Mediterranean' },
  gsx$reportedmonth: { $t: month },
  gsx$reportedyear: { $t: year },
  gsx$numberdead: { $t: numDead },
})

const entries = [
  entry('2019', 'Mar', '3'),
  entry('2019', 'Mar', '1'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Feb', '3'),
  entry('2019', 'Feb'),
  entry('2019', 'Feb', '2'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Feb', '1'),
  entry('2019', 'Jan', '1'),
  entry('2019', 'Jan', '1'),
  entry('2019', 'Jan', '1'),
  entry('2019', 'Jan', '1'),
]

new Vue({
  el: '#app',
  data() {
    return {
      entries
    }
  },
  computed: {
    medEntries() {
      const tally = this.entries
        .filter(entry => entry.gsx$regionofincident.$t === 'Mediterranean')
        .reduce((obj, entry) => {
          const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
          const val = obj[key]
          const numDead = Number(entry.gsx$numberdead.$t || 0)

          if (val) {
            val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
          } else {
            obj[key] = entry
          }
          return obj
        }, {})

      return Object.values(tally)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <div v-for="entry in medEntries">
    <span>{{entry.gsx$reportedyear.$t}} - {{entry.gsx$reportedmonth.$t}} - {{entry.gsx$numberdead.$t}}</span>
  </div>
</div>