v-for with 2 <tr> every time

Can you show your complete v-for?

It's something similar to this, I have removed some td's as they just output information in the same way.

I want the description to be a whole line.

<tbody>
            <tr
                    v-for="user in users">
                <td>{{ user.name }}</td>
                <td><button>Action !</button></td>
                <td colspan="5">
                    {{ user.description }}
                </td>
            </tr>
        </tbody>

post the script code too

I'm not sure how that's gonna change anything? It's just an array of objects and it's gathering it from a resource.

users: [{ name: 'John Doe', description: 'Some info..' }]

The v-for iterates the Users object. You can take what like out of the object and do what want? You could have one iteration create 1 or more rows or one row with N columns?

Hmm not too sure here then. I can't seem to replicate it here?

https://jsfiddle.net/wuxkc33s/

It's something similar to this, I have removed some td's as they just output information in the same way.

The complete code would help as you may have missed a closing tag somewhere causing multiple tr's...

I'm not sure if this is what you're looking for.

<tbody>
    <template v-for="user in users">
      <tr>
          <td>{{user.name}}</td>
          <td><button>Action !</button></td>
      </tr>
      <tr>
          <td colspan="5">
              {{ user.description }}
          </td>
      </tr>
    </template>
</tbody>

I think you misunderstand me, because my answers don't make sense and your questions seems to be out of context. Let me try to explain it again.

I want to end up with a HTML code like this

<tbody>
  <tr>
    <td>John Doe</td>
    <td>Some information</td>
    <td>Some more information</td>
  </tr>
  <tr>
    <td colspan="3">Description</td>
  </tr>
</tbody>

So for each user I need to apply 2 set of tr's, which means I can't use "tr v-for" as the v-for needs to be in the middle between tbody and tr. I think my question should have been: Is there some tag provided by Vue I can use in this case?

Yes that was exactly it @ratiw ! Sorry for the bad explanation and thanks for your help.

@EmilMoe You're very welcome. :)

Hi there, I have the same problem and with @ratiw solution, I got this error: [Vue warn]: Failed to mount component: template or render function not defined.

This is my code

<tbody>
  <template v-for="job in jobs">
    <tr>
      <td>{{ job.DISPLAYED_JOB_TITLE }}</td>
      <td>{{ job.FUNCTION }} </td>
      <td>{{job.TOWN_OR_CITY}}</td>
      <td>{{ job.MIN_SALARY }}</td>
      <td>{{ job.VAC_ADVERTISE_END_DATE }}</td>
    </tr>
    <tr>
      <td colspan="5">{{job.DESCRIPTION}}</td>
    </tr>
  </template>
</tbody>

<script>
  export default {
    props: ['jobs'],
  }
</script>

Thanks @ratiw! This is exactly what I needed so I could do a light weight data table expanding row functionality! Cheers mate!