javascript - Ionic 4 与 Vue js - ion-menu 内的 ion-content 不处理任何点击

Question

我有一个标准的 Vue 应用，其中包含 Ionic 4，使用 @ionic/vue。
这是 ma​​in.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 从不处理任何点击。 您知道如何解决这个问题吗？

谢谢

Answer 1

我找到了一个“解决方案”。 从 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>