Setting master: true is causing list to disappear in second tab

1

Hello,

I’ve run into an issue while trying to implement the master-detail pattern in Framework7 with Vue. I’m using a tabs layout, where each tab has a different view. My main view with a budget list works perfectly fine with the master-detail layout. However, when I try to apply the same master-detail pattern for my Accounts tab, the page turns blank and I can’t see any content on it.

Here’s a brief overview of my setup:

<f7-view
        :animate="true"
        id="view_main"
        name="main"
        main
        tab
        tab-active
        url="/"
        :masterDetailBreakpoint="800"
        :reloadAll="true"
      >
</f7-view>

<f7-view
        :animate="true"
        id="view_accounts"
        name="accounts"
        tab
        url="/accounts/"
        :masterDetailBreakpoint="800"
        :reloadAll="true"
      >
</f7-view>

And here are the associated routes:

var routes = [
  {
    path: "/",
    component: MainPage,
    master: true,
    detailRoutes: [
      {
        path: "/item/:id",
        component: ItemsPage,
        options: {
          transition: "f7-cover",
        },
      },
    ],
  },
{
    path: "/accounts/",
    component: Accounts,
    master: true,
    detailRoutes: [
      {
        path: "/account/:id",
        component: AccountDetails,
      },
    ],
  },
];

The issue seems to arise as soon as I add master: true to the Accounts route in the routes configuration. When I do that, my Accounts list with linked items disappears, resulting in a blank white page.

I have tried the same thing on another tab and the list vanished from that tab as well. Also, I tried to test master-detail pattern only on the Accounts tab and removed it from the main tab but same results.

I’m trying to figure out if this is an oversight on my part or if there’s a limitation in using multiple master-detail patterns in Framework7 Vue.

Has anyone encountered a similar issue? Any guidance or suggestions would be greatly appreciated!

Thank you!