How to deal with an array in one table cell? How to make rowspan in Vue template?

Question

HTML

There is data:

tempData: [
        {
          name: 'Vasya',
          age: 22,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
        {
          name: 'Petya',
          age: 43,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
        {
          name: 'Stapan',
          age: 52,
          links: ['http://facebook.com', 'http://google.com', 'http://vk.com'],
        },
      ],

It is not clear what to do with the last value. links
I did not find any example of how to dynamically redefine rowspan in the View template when rendering the cycle.
You can probably do without it, but it's still not clear how to display an array in the last cell not in plain text, but to walk through it in a loop.
I made an example - https://codepen.io/anon/pen/rEZeZM
I looked at the existing solutions in all kinds of Viewify - no one has a rowspan. How so? Is this an impossible task?

Answer 1

I see the following options:

1. Output the zero element of the array on the same line as regular values ​​(whose cells are set to rowspan equal to the length of the array), the rest - in separate lines:
   

   <template v-for="row in rows">
     <tr>
       <template v-for="(item, k) in row">
         <td v-if="k === 'links'">{{ item[0] }}</td>
         <td v-else :rowspan="row.links.length">{{ item }}</td>
       </template>
     </tr>
     <tr v-for="link in row.links.slice(1)">
       <td>{{ link }}</td>
     </tr>
   </template>

   
   
2. Completely separate the output of regular values ​​(set cells to rowspan equal to the length of the array + 1) and the array:
   

   <template v-for="row in rows">
     <tr>
       <td
         v-for="k in [ 'name', 'age' ]"
         :rowspan="row.links.length + 1"
       >{{ row[k] }}</td>
     </tr>
     <tr v-for="link in row.links">
       <td>{{ link }}</td>
     </tr>
   </template>

   
   
3. Refuse to use rowspan, display all array elements in one cell:
   

   <tr v-for="row in rows">
     <td v-for="item in row">
       <template v-if="item instanceof Array">
         <div v-for="n in item">{{ n }}</div>
       </template>
       <template v-else>
         {{ item }}
       </template>
     </td>
   </tr>

   
   

https://jsfiddle.net/56sum97n/