[Vuejs]-Render 2 elements in one TD ( table column ) from array Vuejs

by

0👍

✅

You could do something like this, you might have to tweak it to fit your project according to your needs.

I’m not using VueJS at all, so there might be better solutions to your problem as I’m not aware of all the possibilities that this framework brings.

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>

0👍

Hey everybody i tried to modify it a bit.

I wanted to demonstrate another approach,
so i builded a computed property that transforms your array data accordingly, outcome stays the same.

    
        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>

Leave a comment