Does vue.js have something like AngularJS' `ng-repeat-start`

Question

Parsing vue.js' docs I can't see any hint that vue.js has something like a ng-repeat-start / ng-repeat-end

Is there a way to archive something like

<table>

  <tr class="weather_warning top" ng-repeat-start="warning in dwd_warnings">
    <td {{warning.valid_from}} → {{warning.valid_to}}</td>
    <td><div style='background:{{warning.color}};'>{{warning.message}}</div></td>
  </tr>

  <tr class="weather_warning bottom" ng-repeat-end>
    <td colspan="2">
      {{warning.description}}<br/>
      <span>Issued on the {{warning.effective}} ({{warning.headline}}). {{warning.ascertain}}</span>
    </td>
  </tr>

</table>

Each warning consists of 2 TRs which go together. One is the top half of the message in the iteration, the other one the lower half. It must be this way, because of some very weird formatting stuff, so there's no way around using 2 TRs for one item. Maybe some tags are off in this example, this is because I had to delete a ton of stuff in order to post it here. Note the colspan="2" in the TD of the second TR, which might give a bit of a hint of the problem which is tackled here.

tony19 · Accepted Answer · 2022-07-15 02:37:12Z

3

Closest thing I can think of is to use a <template>, eg

<template v-for="item in items">
  <header>
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer>
    Footer {{ item }}
  </footer>
</template

See https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

... you can also use a <template> tag with v-for to render a block of multiple elements

Nothing changes with your edit, you just wrap your two <tr> elements in

<template v-for="warning in dwd_warnings">
  <tr class="weather_warning top">
    <!-- etc -->
  </tr>
  <tr class="weather_warning bottom">
    <!-- etc -->
  </tr>
</template>

edited Jul 15, 2022 at 2:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 11, 2018 at 11:43

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Phil Over a year ago

@DanielF I think not, at least according to the example here ~ docs.angularjs.org/api/ng/directive/…

Daniel F Over a year ago

I removed my comment, because I saw the error. I'm updating the question now to reflect my specific use-case, give me a minute

Daniel F Over a year ago

I changed the example. As I said, when I commented, I did so erroneously, with a wrong assumption, please check the question again and you will understand my problem.

Phil Over a year ago

@DanielF I've updated my answer though nothing has really changed

Somnium Over a year ago

Just note: you need to specify ":key" property for child elements, not the template tag.

|

Collectives™ on Stack Overflow

Does vue.js have something like AngularJS' `ng-repeat-start`

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related