Question

我有一个标准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从未处理过任何点击。关于如何解决此问题的任何想法？

谢谢

Answer 1

我找到了一个“解决方案”。从离子菜单中删除“ content-id”属性和“ 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>

带有Vue js的Ionic 4-离子菜单中的离子含量无法处理任何点击

1 个答案: