Ionic 4 + vue.js / ion-button not clickable when using ion-tabs

@HassBrot wrote:

I am using in my package.json:

• @ionic/core: “^4.0.3”,
• @ionic/vue: “0.0.4”,
• vue: “^2.6.10”,
• vue-router: “^3.0.6”
  furthermore:
• I’m using the IonVueRouter from @ionic/vue

I’ve wrote an IonVuePage component, which has two other components, the HeaderSection (), and the TabBar (). Between those components I’ve added a Tag, to add other components inside of this default layout.
However, If I am using a simple ion-button inside a new component (e.g. Home component), which is inside the Tag of the IonVuePage component it is not clickable until:

1. I Wrap it inside of a Tag, or
2. I remove the TabBar component of the IonVuePage component.

What could explain that behaviour?

Do I have my mistake in combining of and IonVueRouter? Can I use both?

I’ve noticed, that the

where the TabBar is placed in is overlying:

Screenshot from 2019-04-30 18-29-08.png1680×1050 173 KB

Here’s my code:

IonVuePage component:

<template>
  <ion-page
    class="ion-page"
    main>
    <header-section
      :title="title"
      :show-back-button="showBackButton"/>
    <slot name="content"/>
    <tab-bar/>
  </ion-page>
</template>

<script>
import TabBar from '@/components/page/TabBar';
import HeaderSection from '@/components/page/HeaderSection';

export default {
  name: 'IonVuePage',
  components: {
    TabBar,
    HeaderSection,
  },
...

TabBar component:

<template>
  <!-- Listen to before and after tab change events -->
  <ion-tabs
    @IonTabsWillChange="beforeTabChange"
    @IonTabsDidChange="afterTabChange">

    <ion-tab
      tab="home"/>
    <ion-tab
      tab="request"/>

    <template slot="bottom">
      <ion-tab-bar >

        <ion-tab-button tab="home">
          <ion-icon name="home"/>
          <ion-label>Schedule</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>

        <!-- Provide a custom route to navigate to -->
        <ion-tab-button tab="request">
          <ion-icon name="contacts"/>
          <ion-label>Request</ion-label>
        </ion-tab-button>

      </ion-tab-bar>
    </template>
  </ion-tabs>
</template>

Home component:

<template>
  <ion-vue-page
    :title="welcometext"
    :show-back-button="true">
    <ion-content slot="content">

      <ion-button @click="changeToRequest">change to request page!</ion-button>

      <ion-buttons>
        <ion-button
          fill="solid"
          @click="showModal">show modal! </ion-button>
      </ion-buttons>

    </ion-content>
  </ion-vue-page>
</template>
  },
...

App.vue:

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

router.js:

import Vue from 'vue';
import { IonicVueRouter } from '@ionic/vue';
import Home from '@/views/Home';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history', // for not having the # in the URL
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/request',
      name: 'Requet',
      component: () => import('@/views/TestRequest'),
    },
  ],
});

I appreciate any kind of help or advise.
Kind regards

Posts: 1

Participants: 1

Read full topic