帶有 Vue js 的 Ionic 4 - 離子菜單中的離子內容不處理任何點擊

Question

我有一個使用@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從不處理任何點擊。 關於如何解決這個問題的任何想法？

謝謝

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>