0

In VueJs, I need to be able to compute a quantity which depends on the order of the components in a table:

<mySlides>
  <componentTableOfContent></componentTableOfContent>
  <componentA my-title="First title" pages="5">Blabla</componentA>
  <componentB my-title="Second title" pages="2">Bleble</componentA>
  <componentC my-title="Third title" pages="4">Blibli</componentA>
<mySlides>

Should produce something as following:

Table of content:
- First title, pages 1-5
- Second title, pages 6-7
- Third title, pages 8-12

# First title, page 1

Blabla

# Second title, page 6

Bleble

# Third title, page 8

Blibli

Do you know how I could do that?

Note that I don't want to specify in each component its absolute position for the sake of maintainability. Ideally, the method should work irrespective of the time to load each component, and would get updated if some components are dynamically added.

EDIT I'm wondering if list of slots could not help with this task How to render a list of static content with Vue named slot? but if so I'm not yet sure to see how to use them in vue 3

tobiasBora
  • 1,542
  • 14
  • 23
  • If components are hardcoded, order can be hardcoded too, if not, you should what generates that components. In Vue (or any mvvm pattern for that matter), you dont think about components and elements, you think about data and UI is just a side effect of data. – Mat J Jan 21 '22 at 09:59
  • @MatJ As explained I don't want to hardcode redundant absolute values in order to keep a syntax as natural as possible and most importantly easy to maintain (if I change the page of the first slide, I don't want to update all the other slides). Sure, UI is a side effet of data, but my question is "how would you generate the data", ideally using a natural html-based syntax (at least for the end user, I don't care if more advanced syntax is needed to define `mySlide`). For instance, is it possible to ask to `mySlide` to generate a list of component, and extract from them the page, title,...? – tobiasBora Jan 21 '22 at 10:36

0 Answers0