v-for with varaible number of content blocks - vue.js

Question

Is there a way to have variable amount of content blocks inside a v-for loop? Say one of the instances has 1 content paragraph and an other needs 3 content paragraphs? Would you have to create a nested loop inside the outer loop?
https://codepen.io/mDDDD/pen/dyWRqJW
<div id='timeline' class="timeline container">
<div class="timeline__main">
<div
class="timeline__main--inner"
v-for="year in timelines"
:key="year.id"
ref="timelines"
>
<div class="timeline-title">
<h3 class="title-3">{{ year.year }}</h3>
</div>
<div class="timeline-content">
**(one of the instances this needed 3 P tags with class history content?)**
<p class="history-description">
{{ year.content }}
</p>
const Timeline = {
data() {
return {
timelines: [
{ id: 2020, year: '2020', content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. `},
{ id: 2019, year: '2019', content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ` },
],
};
},
};
Vue.createApp(Timeline).mount("#timeline");
</div>
</div>
</div>
</div>

Answer 1

Two adjustments: (1) to the data, representing N paragraphs per year, and (2) the important one in the markup, nesting a v-for to iterate the nested array.
var app = new Vue({
el: '#app',
data() {
return {
timelines: [{
id: 2020,
year: '2020',
content: [`The first paragraph in 2020`, `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. `]
},
{
id: 2019,
year: '2019',
content: [`The first paragraph in 2019`, `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. `]
},
],
};
},
})
.timeline__main--inner {
display: flex;
margin-bottom: 75px;
}
.timeline__main {
width: 100%;
max-width: 785px;
margin: 0 auto;
}
.timeline-title {
display: flex;
align-items: center;
padding-right: 65px;
border-right: 1px solid grey;
h3 {
color: green;
font-size: 60px;
}
}
.timeline-content {
padding: 15px 54px 15px 62px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id='timeline' class="timeline container">
<div class="timeline__main">
<div class="timeline__main--inner" v-for="year in timelines" :key="year.id" ref="timelines">
<div class="timeline-title">
<h3 class="title-3">{{ year.year }}</h3>
</div>
<div class="timeline-content">
<p class="history-description" v-for="(p,i) in year.content" :key="i">
{{ p }}
</p>
</div>
</div>
</div>
</div>
</div>