Display two elements within a single table column by utilizing an array in Vue.js

Question

Display two elements within a single table column by utilizing an array in Vue.js

I have a requirement to display 2 items from an array in one table TD ( column ). Below is the example mock data provided:

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.'
          }
        ]
      ]

Below is the Vue structure being used:

<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>

At present, the data from the mock is displayed in 4 td's, but there is a request to combine the last 2 objects of the array into a single td.

javascript vue.js vuejs2

Answer 1

Answer №1

If you're looking to implement something similar, you can start with the following code snippet and adjust it as needed for your specific project requirements.

Since I'm not utilizing VueJS in this example, there may be more optimal solutions available within the framework that I'm not familiar with.

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>

Answer 2

If you're looking to implement something similar, you can start with the following code snippet and adjust it as needed for your specific project requirements.

Since I'm not utilizing VueJS in this example, there may be more optimal solutions available within the framework that I'm not familiar with.

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>

Answer 3

Answer №2

Hello everyone, I made some modifications to this code snippet.

I decided to take a different approach by creating a computed property that transforms the array data in a way that maintains the same outcome.

    
        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 4

Hello everyone, I made some modifications to this code snippet.

I decided to take a different approach by creating a computed property that transforms the array data in a way that maintains the same outcome.

    
        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>

Display two elements within a single table column by utilizing an array in Vue.js

Answer №1

Answer №2

Similar questions

What is the best way to transfer form data to another function without causing a page refresh?

Are you in need of a JavaScript data validation tool?

What is the best way to position a <td> element within a table row underneath another <td>?

What is the best way to load $cookies into an Angular service?

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Encountering an issue with Vue 3 Composition API and Vue Router 4 navigation guards causing errors during implementation

Using Selenium WebDriver to handle Angular requests in Java

Are there any creative methods for structuring Node.js Alexa code efficiently?

Is it possible to replicate an HTML table using JavaScript without including the headers?

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

My Vuejs project is becoming overwhelming due to the excessive number of watchers, making it difficult to scale the code

Positioning of the dropdown in Material UI AutoComplete menus

Pass an array using AJAX to my Python function within a Django framework

Navigating to a different page using the browser address bar causes the context to be reset

Using Javascript to trigger form submission using arrow keys

Encountering a "Text creation error" while trying to run a three.js demo on Microsoft Edge using the WebGL context

Tips for triggering an error using promise.all in the absence of any returned data?

import a file based on a specific condition in a Next.js application

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

validate the existence of the username upon submission of the form