Hello,
I’m starting from scratch in frontend development as well as F7.
I have a chunk of code that reads from a json object and adds tabs to the page from it.
The point is that from Desktop everything is working fine but not in mobile devices.
{
path: ‘/test/’,
component: {
template: `
Equipos
Opposite Side
{{#each teams}}
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>1. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
`,
data: function () {
return {
teams: null, //['item1', 'item2'],
}
},
on: {
pageInit: function () {
var self = this;
var app = self.$app;
// get data from http
app.request.json('https://www.filltext.com/?rows=2&fname={firstName}&lname={lastName}&pretty=true', (data) => {
var i;
var localTeams = [];
for(i = 0; i < data.length; i++){
localTeams.push(data[i].fname);
}
self.$setState({
teams: localTeams,
});
});
},
},
},
},
Any clue?
Thanks in advance!
Regards,