0

my package.json

"dependencies": {
    ...
    "@ionic/vue": "^6.0.13",
    "@ionic/vue-router": "^6.0.13",
    "@popperjs/core": "^2.11.2",
    "axios": "^0.25.0",
    "core-js": "^3.6.5",
    "vue": "^3.2.31",
    "vue-axios": "^3.4.0",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.17.0",
    "@babel/eslint-plugin": "^7.16.5",
    "@capacitor/cli": "3.4.1",
    "@vue/cli-plugin-babel": "^5.0.4",
    "@vue/cli-plugin-eslint": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "@vue/compiler-sfc": "^3.2.31",
    "eslint": "^8.12.0",
    "eslint-plugin-vue": "^8.5.0",
    "eslint-webpack-plugin": "^3.1.1"
  },

I have following code:

App.vue

<template>
    <ion-app><ion-page>

        <app-main-menu />

        <router-view id="main-content" :key="$route.fullPath" />

    </ion-page></ion-app>
</template>

MainMenu.vue

<ion-menu side="start" content-id="main-content" menu-id="app-menu">
    <ion-header>
        <ion-toolbar translucent>
            <ion-title>title</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>

            <ion-item lines="none">
                <ion-label>label</ion-label>
            </ion-item>

        </ion-list>
    </ion-content>
</ion-menu>

Component

<template>
    <ion-content>
        My content
    </ion-content>

    <ion-footer>
        <ion-toolbar>
            My footer
        </ion-toolbar>
    </ion-footer>
</template>

My error: Menu: must have a "content" element to listen for drag events on.

If I paste <ion-footer> inside <ion-content> it's work without errors. But I read documentation https://ionicframework.com/docs/ja/v5/api/footer and there is nothing said about the error. I would like to use tabs, but they are also lame Ion-tabs, incorrect component display.

Andrew
  • 125
  • 1
  • 7
  • The ion-content must have an id attribute equal to the content-id of the ion-menu: . more info https://stackoverflow.com/a/58953688/1571060 – musicvicious Apr 26 '22 at 12:50
  • Oh, thank you, friend. It really works. My `router-view` contains events like `@setBreadcrumbsLayout="setBreadcrumbs"` and an error has appeared. But anyway, thanks a lot! [http://dl3.joxi.net/drive/2022/04/26/0004/1703/325287/87/bc2fd88fa5.jpg](http://dl3.joxi.net/drive/2022/04/26/0004/1703/325287/87/bc2fd88fa5.jpg) – Andrew Apr 26 '22 at 18:20

0 Answers0