CODEWITHSUNDEEP
vue.js
Mistre83
Mistre83

Reputation: 2827

Add content on click

in my application i have a simple loop on tr element, to build a table:

<tr v-for="user in users"></tr>

Because i'm using an accordion, i will need two rows (the first row generated with v-for and another row that is the accordion):

<tr></tr> Generated with v-for
<tr></tr> Row for accordion
<tr></tr> Generated with v-for
<tr></tr> Row for accordion

So, v-for iterate the collection and for each row, i have another row (that is the accordion).

I would like build the "additional row" when the user click on the row generated via v-for.

So, how i can "attach" this row below the selected row ? I have think to use slot, but i'm a bit confused...

And, when the user click on another row... the previous attached row should be removed and the next one, will be attached on the selected.

In short, the same behavior of Bootstrap Accordion. I need this because in this way i can load the accordion content "on demand".

Upvotes: 0

Views: 180

Answers (1)

kartsims
kartsims

Reputation: 1008

Try wrapping them both around a <template> element as such :

<template v-for="user in users">
  <tr></tr> Generated with v-for
  <tr></tr> Row for accordion
</template>

The <template> element will not be rendered.

Upvotes: 3

Related Questions