Добавить новый элемент в массив через js

Question

Есть данные в json, которые я отображаю в таблице через bootstrap vue

[
  {"data": "data1", kvartal: '1'},
  {"data": "data2", kvartal: '1'},
  {"data": "data3", kvartal: '2'},
  {"data": "data4", kvartal: '2'},
  {"data": "data5", kvartal: '3'}
]

Нужно отобразить так, чтобы в начале каждого квартала стоял разделитель типа:

<table>
 <tbody>
   <tr>
     <td colspan='2'>Квартал 1</td>
   </tr>
   <tr>
     <td>data</td>
     <td>data</td>
   </tr>
   <tr>
     <td>data</td>
     <td>data</td>
   </tr>
   <tr>
     <td colspan='2'>Квартал 2</td>
   </tr>
   <tr>
     <td>data</td>
     <td>data</td>
   </tr>
   <tr>
     <td>data</td>
     <td>data</td>
   </tr>
   <tr>
     <td colspan='2'>Квартал 3</td>
   </tr>
   <tr>
     <td>data</td>
     <td>data</td>
   </tr>
 </tbody>
</table>

Ума не приложу как это реализовать, спасибо за помощь

Answer 1

new Vue({
  el: '#app',
  template: `
    <div>
      <table>
        <tbody>
          <tr v-for="item in listFiltered">
            <td v-if="item.title" colspan="2">{{ item.title }}</td>
            <template v-else>
              <td>{{ item.data }}</td>
              <td>{{ item.data }}</td>
            </template>
          </tr>
        </tbody>  
      </table>
    </div>
  `,
  data() {
    return {
      list: [
        {
          data: "data1",
          kvartal: "1"
        },
        {
          data: "data2",
          kvartal: "1"
        },
        {
          data: "data3",
          kvartal: "2"
        },
        {
          data: "data4",
          kvartal: "2"
        },
        {
          data: "data5",
          kvartal: "3"
        },
      ],
    };
  },
  computed: {
    listFiltered() {
      const LIST_NEW = [];
      let kvartal = 0;
      this.list.forEach(item => {
        if (+item.kvartal > kvartal) {
          LIST_NEW.push({ title: `Квартал ${ item.kvartal }` });
          kvartal++;
        }
        LIST_NEW.push(item);
      });
      return LIST_NEW;
    },
  },
  methods: {

  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

БЛОГ НА HUSL

Добавить новый элемент в массив через js

Ответы (1 шт):