I’ve been trying for many, many, many hours to get the master detail interaction to work, but my attempts have been futile. I keep getting the output on the master page (the same pane as where the list-item link is) rather than on the detail pane.
I’ve read the docs and I’ve seen the kitchen sink code and see no difference with mine, yet it isn’t working. I used the standard commands to start my project (npm i framework7-cli cordova -g; framework7 create --ui).
I’m using Vue and enabled PWA and simple web app support during installation. I tried to modify the code to use the master detail page, but with no success.
Here are snippets of my project’s code (which I hope proves useful). Let me know if you need any more details.
app.js:
// Import Vue
import Vue from 'vue';
// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle.js';
// Import Framework7-Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';
import 'framework7-icons/css/framework7-icons.css';
// Import Icons and App Custom Styles
import '../css/app.scss';
// Import App Component
import App from '../components/app.vue';
// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);
// Init App
new Vue({
el: '#app',
render: (h) => h(App),
// Register App Component
components: {
app: App,
},
});
app.vue:
<template>
<f7-app :params="f7params" >
<f7-view url="/" :main="true" :master-detail-breakpoint="800" class="safe-areas"/>
</f7-app>
</template>
<script>
import ListItem from '../components/list-item.vue';
import NavList from '../pages/nav-list.vue';
export default {
components: {
ListItem,
NavList
},
data() {
return {
// Framework7 Parameters
f7params: {
name: 'Test Project', // App name
theme: 'auto', // Automatic theme detection
view: {
pushState: true,
history: true,
},
};
},
// App routes
routes,
// Register service worker
serviceWorker: {
path: '/service-worker.js',
},
},
}
}
}
</script>
routes.js:
import ListItem from '../components/list-item.vue';
import NavList from '../pages/nav-list.vue';
import LoginPage from '../pages/login.vue';
import NotFoundPage from '../pages/404.vue';
export default [
{
path: '/',
component: NavList,
master: true,
detailRoutes: [
{
path: '/detail/item/',
component: ListItem
},{
path: '/detail/item/:id/',
component: ListItem
},{
path: '/detail/login/:id/',
component: LoginPage
}]},
{
path: '(.*)',
component: NotFoundPage,
}
];
<template>
<f7-view>
<f7-page>
<f7-navbar back-link="Back" large>
<div slot="title-large">Items <f7-badge v-if="newItems()">{{newItems().length}}</f7-badge></div>
</f7-navbar>
<f7-block-title v-if="lockedItems(false).length != 0">{{lockedItems(false).length}} Recent {{itemsFriendlyName(lockedItems(false))}}</f7-block-title>
<f7-list>
<list-item :selected-id="selectedItemId" :locked="item.locked" v-for="item in lockedItems(false)" @on-selected="updateSelectedItem" :key="item.id" :item="item"></item-list-item>
</f7-list>
<f7-block-title v-if="lockedItems(true).length != 0">{{lockedItems(true).length}} {{lockedItemsFriendlyLabel()}}</f7-block-title>
<f7-list>
<list-item :selected-id="selectedItemId" :locked="item.locked" v-for="item in lockedItems(true)" @on-selected="updateSelectedItem" :key="item.id" :item="item"></item-list-item>
</f7-list>
</f7-page>
</f7-view>
</template>
<script>/* ... name, data, methods ... */</script>
list-item.vue
<template>
<f7-list-item :class="[selectedId === item.id ? 'sa-selected' : (item.isNew === true) ? 'sa-new' : '']" @click="markAsSelected" :reload-detail="true" :link="`/detail/${item.locked ? 'login' : 'item'}/${item.id}/`" :title="item.name" :footer="shortDescription(item)">
<i v-if="locked" slot="media" class="fa far fa-lock" style="color: var(--f7-list-item-footer-text-color);"></i>
</f7-list-item>
</template>
<script>/* ... name, props, methods ... */</script>