[英]Ionic 4 with Vue js - ion-content inside ion-menu doesn't handle any click
I have a standard Vue app
with Ionic 4
using @ionic/vue
.我有一个使用@ionic/vue
带有Ionic 4
的标准Vue app
。
This is the main.js file:这是main.js文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'
Vue.use(Ionic)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
And this is the app-component.ts:这是app-component.ts:
<template>
<div id="app">
<ion-app>
<ion-menu content-id="menu-content" side="start">
<ion-header>
<ion-toolbar>
<ion-title> <p v-on:click="test">Menu</p> </ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding id="menu-content">
<p v-on:click="test"> test </p>
</ion-content>
</ion-menu>
<ion-vue-router />
</ion-app>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
test () {
alert('test')
}
}
}
</script>
The app work perfectly except this: When i click on the Menu title the alert appear correctly.该应用程序完美运行,除了:当我单击菜单标题时,警报显示正确。 When i click on the "test" inside ion-content
nothing appens.当我单击ion-content
的“测试”时,什么也没有发生。 I've tried many variants, with vanilla onclick
also, but ion-content
inside ion-menu
never handle any click.我已经尝试了很多变体,也有香草onclick
,但ion-menu
ion-content
从不处理任何点击。 Any idea on how to solve this problem?关于如何解决这个问题的任何想法?
Thank you谢谢
I've found a "solution".我找到了一个“解决方案”。 Remove from ion-menu the "content-id" attribute and the "id" attribute from ion-content.从 ion-menu 中删除 "content-id" 属性和 ion-content 中的 "id" 属性。 Instead use the "main" attribute in ion-vue-router.而是使用 ion-vue-router 中的“main”属性。
This is deprecated but it works...这已被弃用,但它有效......
Basically:基本上:
<template>
<div id="app">
<ion-app>
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title> <p v-on:click="test">Menu</p> </ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding >
<p v-on:click="test"> test </p>
</ion-content>
</ion-menu>
<ion-vue-router main />
</ion-app>
</div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.