Framework7 Loop Dynamic Content within Route - vue.js

Question

I am using Framework 7 to load demo cards in the router. The problem is I am not sure how to loop through multiple records in the template display.
Here is my route
{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
// Requested route
// Get external data and return template7 template
app.request.json('data.json', function (data) {
console.log(data);
resolve(
// How and what to load: template
{
template: `<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">News</div>
</div>
</div>
<div class="page-content">
<div class="card demo-card-header-pic">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
<div class="card-content card-content-padding">
<p class="date">{{Title}}</p>
<p>{{Header}}</p>
</div>
<div class="card-footer">Read more</div>
</div>
</div>
</div>`
},
// Custom template context
{
context: {
ID: data.content.ID,
Title: data.content.Title,
Header: data.content.Header,
Description: data.content.Description,
TitleImg: data.content.TitleImg,
},
}
);
});
}
},
here is sample json:
{
"contentType": "news",
"content": [{
"ID": 1,
"Title": "Test",
"Header": "Short Text",
"Description": "lorem ipsum",
"TitleImg": "/img/collab.jpg"
}, {
"ID": 2,
"Title": "Test2",
"Header": "Short Text2",
"Description": "lorem ipsum2",
"TitleImg": "/img/collab.jpg"
}]
}
Right now it doesn't show anything but I would like to see both entries.
TAKE 2 but still not working.... the items array has my data but the for loop doesnt work
{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
// Requested route
// Get external data and return template7 template
app.request.json('data.json', function (data) {
for (var i = 0; i < data.content.length; i++) {
items.push({
ID: data.content[i].ID,
TitleImg: data.content[i].TitleImg,
Title: data.content[i].Title,
Header: data.content[i].Header
});
}
console.log(items);
resolve(
{
template: `<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">News</div>
</div>
</div>
<div class="page-content">
<div class="card demo-card-header-pic" v-for="item in items">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
<div class="card-content card-content-padding">
<p class="date">{{Title}}</p>
<p>{{Header}}</p>
</div>
<div class="card-footer">Read more</div>
</div>
</div>
</div>`
},
{
items: items,
}
);
});
}
},
EDIT - Working solution thanks #djiggy
{{#each items}}
<div class="card demo-card-header-pic">
<a href="/about/{{ID}}/">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"><div class="card-headerTxt">{{Title}}</div></div>
<div class="card-content card-content-padding">
<p>{{Header}}</p>
</div>
</a>
</div>
{{/each}}

Answer 1

When you use data as Template7, you have to use Template7 syntax (cf. expressions syntax section)
So in your case, you have to update v-for to each block
Useful link : Access to object with each