1

我有一个Vue app使用Ionic 4标准@ionic/vue。
这是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-content里面ion-menu从来没有处理任何点击。关于如何解决这个问题的任何想法？

谢谢

4

1 回答 1

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>
于 2019-12-19T09:29:12.273 回答