I have a view that includes top nav, a scrollable tab list of TOPICS, a scrollable list of Offers representing the selected topic and finally my bottom nav with icons for each view. The scrollable tab list of TOPICS currently calls a route with the topic as a parameter. This results in the entire Offers view being re-rendered including the top-nav, the scrollable tabs and the scrollable list of Offers.
How can I structure this offers view so that only the page-content gets refreshed when you select one of the scrollable topics?
Here is a simplified version of the Offers view:
<template>
<div class="page" data-name="offers">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<div class="title">
<i class="icon material-icons" style="display:inline;vertical-align:middle;">whatshot</i>
<div style="display:inline;vertical-align:middle;font-size:24px;margin-left:-5px;">brighter</div>
</div>
</div>
<div class="right">
<div class="searchbar searchbar-inline" style="width:200px">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
</div>
<div id="avatar-out">
<a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
<i class="icon f7-icons ios-only" style="font-size:40px">person_round_fill</i>
<i class="material-icons md-only" style="font-size:40px">account_circle</i>
</a>
</div>
<div hidden id="avatar-in">
<a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
<img id="user-pic" src="" style="width:40px;height:40px;border-radius:20px;">
</a>
</div>
</div>
</div>
</div>
<!-- Scrollable nav for categories -->
<div class="toolbar tabbar tabbar-scrollable toolbar-top">
<div class="toolbar-inner">
<!-- Links have "tab-link" class instead of just "link" to switch tabs -->
<a href="/offers/ALL/" class="tab-link tab-link-active">ALL</a>
<a href="/offers/TOPICONE/" class="tab-link">TOPICONE</a>
<a href="/offers/TOPICTWO/" class="tab-link">TOPICTWO</a>
<a href="/offers/TOPICTHREE/" class="tab-link">TOPICTHREE</a>
</div>
</div>
<div class="page-content">
{{#each offers}}
<div class="card offer-card" id="{{this.id}}">
<div class="card-header">
<div>
<div class="offer-avatar"><img src="{{this.pic}}" class="avatar-image"/></div>
<div class="offer-name">{{this.name}}
<a style="float:right" class="link popover-open" href="#" data-popover=".popover-links"><i class="icon f7-icons ios-only">more_fill</i>
<i class="material-icons md-only">more_horiz</i></a>
</div>
</div>
</div>
<div class="card-content card-content-padding">
<p>{{this.offer}}</p>
<div class="card">
<div class="card-content">
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</template>
<script>
return {
data() {
return {
offers: [],
};
},
mounted() {
const self = this;
self.getItems();
},
methods: {
async getItems() {
// load items from DB and set state for the page
}
}
}
</script>