[英]Ionic 4 with Vue js - ion-content inside ion-menu doesn't handle any click
我有一个使用@ionic/vue
带有Ionic 4
的标准Vue app
。
这是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')
这是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>
该应用程序完美运行,除了:当我单击菜单标题时,警报显示正确。 当我单击ion-content
的“测试”时,什么也没有发生。 我已经尝试了很多变体,也有香草onclick
,但ion-menu
ion-content
从不处理任何点击。 关于如何解决这个问题的任何想法?
谢谢
我找到了一个“解决方案”。 从 ion-menu 中删除 "content-id" 属性和 ion-content 中的 "id" 属性。 而是使用 ion-vue-router 中的“main”属性。
这已被弃用,但它有效......
基本上:
<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.