Hi team,
Please what am I doing wrong? I have a tab bar menu and I am trying to load pages into the each tab as they are clicked but it does not seem to be working.
I get this error instead,
TypeError: Cannot read property ‘2’ of null
Please, kindly help out.
<div class="toolbar-inner">
<a href="/tab-feeds/" data-route-tab-id="tab-feeds" class="tab-link tab-link-active">
<img src="img/Navbar/[email protected]" width="26" height="26" />
<!-- Label text -->
<span class="tabbar-label">feeds</span>
</a>
<a href="/tab-wards/" data-route-tab-id="tab-wards" class="tab-link">
<img src="img/Navbar/[email protected]" width="26" height="26" />
<span class="tabbar-label">Wards</span>
</a>
<a href="/tab-chats/" data-route-tab-id="tab-chats" class="tab-link">
<img src="img/Navbar/[email protected]" width="26" height="26" />
<span class="tabbar-label">chats</span>
</a>
<a href="/tab-events/" data-route-tab-id="tab-events" class="tab-link">
<img src="img/Navbar/[email protected]" width="26" height="26" />
<span class="tabbar-label">Events</span>
</a>
</div>
</div>
<div class="tabs">
<div class="page-content tab" id="tab-feeds">
</div>
<div class="page-content tab" id="tab-wards">
</div>
<div class="page-content tab" id="tab-chats">
</div>
<div class="page-content tab" id="tab-events">
</div>
</div>
And the code behind from the js file
{
name: ‘menu’,
path: ‘/menu/’,
url: ‘menu.html’,
tabs: [
{
// Tab path
path: '/tab-feeds/',
// Tab id
id: 'tab-feeds',
// Fill this tab content from content string
componentUrl: './streams.html',
},
// Second tab
{
path: '/tab-wards/',
id: 'tab-wards',
componentUrl: './wards.html',
},
// Third tab
{
path: '/tab-chats/',
id: 'tab-chats',
componentUrl: './chats.html',
},
{
path: '/tab-events/',
id: 'tab-events',
componentUrl: './events.html',
},
],