Рендеринг 2 элементов в одном TD (столбец таблицы) из массива Vuejs

Question

Я хочу сделать 2 элемента из массива в одной таблице TD (столбец), вот мои фиктивные данные:

agendas: [
        [
          {
            tag: 'p',
            class: 'm-agenda__date',
            value: 'Tue, 12 Oct'
          },
          {
            tag: 'p',
            class: 'm-agenda__time',
            value: '8am - 12pm',
          },
          {
            tag: 'h3',
            class: 'm-agenda__subheading',
            value: 'Subheading of the Sub-Section'
          },
          {
            tag: 'p',
            class: 'm-agenda__description',
            value: 'Ipsum dolor sit amet, consectetur adi piscing elit duis volutpat, urna in. Lorem ipsum dolor sit amet.'
          }
        ]
      ]

А вот моя структура Vue

<table class="m-table__table">
      <tbody>
        <tr
          v-for="(agenda, index) in agendas" :key="index"
          class="m-table__row"
        >
          <td class="m-table__column" v-for="(column, index) in agenda" :key="index">
           <template
            v-slot:column='{ column }'
           >
            <template v-if="column.tag">
             <tag
              :is="column.tag"
              :class="column.class"
             >
              {{column.value}}
             </tag>
            </template>
           </template>
          </td>
        </tr>
      </tbody>
    </table>

В настоящее время данные из макета отображаются в 4 тд, я хочу показать последние 2 объекта массива в один тд.

Answer 1

Привет всем, кого я пытался немного изменить.

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

    
        new Vue({
          el: "#app",
          computed: {
    transformedAgendas () {
      return this.agendas.map(agenda => {
        return agenda.reduce((ret, current, index, originalArray) => {
          if(index === (originalArray.length - 1)){
            return ret;
          } else {
            if (index < (originalArray.length - 2)){
              ret.push(current)
            } else {
              ret.push([current, originalArray[index + 1]])
            }
          }
        return ret
        }, [])
      })
    }
  },
          data: {
            agendas: [
              [{
                  tag: 'p',
                  class: 'm-agenda__date',
                  value: 'Tue, 12 Oct'
                },
                {
                  tag: 'p',
                  class: 'm-agenda__time',
                  value: '8am - 12pm',
                },
                {
                  tag: 'h3',
                  class: 'm-agenda__subheading',
                  value: 'Subheading of the Sub-Section'
                },
                {
                  tag: 'p',
                  class: 'm-agenda__description',
                  value: 'Ipsum dolor sit amet, consectetur adi piscing elit duis volutpat, urna in. Lorem ipsum dolor sit amet.'
                }
              ]
            ],
          }
        })
    
    

    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    
        <div id="app">
          <h2>Agendas</h2>
          <table>
      <tbody>
        <tr v-for="(agenda, index) in transformedAgendas" :key="index" class="m-table__row">
          <template v-for="(column, index) in agenda">
            <td class="m-table__column" v-if="(!Array.isArray(column)) && column.tag" :key="index">
              <tag :is="column.tag" :class="column.class">
                {{ column.value }}
              </tag>
            </td>
            <td class="m-table__column" v-else :key="index">
              <tag v-for="(column, index) in column" :key="index" :is="column.tag" :class="column.class">
                {{ column.value }}
              </tag>
            </td>
          </template>
        </tr>
      </tbody>
    </table>
        </div>
    

Answer 2

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

Я вообще не использую VueJS, так что, возможно, для вашей проблемы найдутся лучшие решения, так как я не знаю всех возможностей, которые дает эта платформа.

new Vue({
  el: "#app",
  data: {
    agendas: [
      [{
          tag: 'p',
          class: 'm-agenda__date',
          value: 'Tue, 12 Oct'
        },
        {
          tag: 'p',
          class: 'm-agenda__time',
          value: '8am - 12pm',
        },
        {
          tag: 'h3',
          class: 'm-agenda__subheading',
          value: 'Subheading of the Sub-Section'
        },
        {
          tag: 'p',
          class: 'm-agenda__description',
          value: 'Ipsum dolor sit amet, consectetur adi piscing elit duis volutpat, urna in. Lorem ipsum dolor sit amet.'
        }
      ]
    ],
  },
  methods: {
    slice(agenda) {
      return agenda.slice(Math.max(agenda.length - 2, 1));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Agendas</h2>
  <table>
    <tbody>
      <tr v-for="(agenda, index) in agendas" :key="index" class="m-table__row">
        <template v-for="(column, index) in agenda">
          <td class="m-table__column" v-if="(index < agenda.length - 2) && column.tag" :key="index">
            <tag :is="column.tag" :class="column.class">
              {{ column.value }}
            </tag>
          </td>
        </template>
        <td class="m-table__column">
          <tag v-for="(column, index) in slice(agenda)" v-if="column.tag" :key="index" :is="column.tag" :class="column.class">
            {{ column.value }}
          </tag>
        </td>
      </tr>
    </tbody>
  </table>
</div>