将点击侦听器添加到Vue中的列表元素时出现问题

Question

我在摆弄vue，由于某种原因，我无法将点击事件监听器添加到<li>

HTML：

<div id="example">
  <vue-navbar></vue-navbar>
  <nav-drawer v-bind:open="open">
    <div slot="drawer-content">
      <ul class="nav flex-column" id="DrawerItems">

        <li class="nav-item" v-on:click="DoShowHome">
            <a class="nav-link" >
                <i class="ion-ios-home"></i> Home
            </a>
        </li>
        <li class="nav-item" v-on:click="DoShowStatistics">
            <a class="nav-link" >
                <i class="ion-stats-bars"></i> Statistics
            </a>
        </li>
        <li class="nav-item" v-on:click="DoShowActivity">
            <a class="nav-link" >
                <i class="ion-flash"></i> Activity
            </a>
        </li>
        <li class="nav-item" v-on:click="DoShowSettings">
            <a class="nav-link" >
                <i class="ion-gear-b"></i> Settings
            </a>
        </li>
      </ul>
    </div>
    <div slot="main-content">
      <div class="container-fluid">
        <div class="row">
            <div id="app-content">
                <div v-if="ShowHome">ShowHome</div>
                <div v-if="ShowStatistics">ShowStatistics</div>
                <div v-if="ShowActivity">ShowActivity</div>
                <div v-if="ShowSettings">ShowSettings</div>
            </div>
        </div>
      </div>
    </div>
  </nav-drawer>
</div>

script.js包含以下vue组件：

var example = new Vue({
  el: '#example',
  data: function(){
    return {
        open: true,
        ShowHome: true,
        ShowStatistics: false,
        ShowActivity:false,
        ShowSettings:false
    }
  },
  created: function(){
    messageBroker.$on('toggle-nav-drawer', this.toggleDrawer)
  },
  beforeDestroy: function() {
    messageBroker.$off('toggle-nav-drawer', this.toggleDrawer)
  },
  methods: {
    toggleDrawer: function() {
      this.open = !this.open;
    },
    DoShowHome: function(event){
        this.ShowHome = true;
        this.ShowStatistics = false;
        this.ShowActivity = false;
        this.ShowSettings = false;
    },
    DoShowStatistics: function(event){
        this.ShowHome = false;
        this.ShowStatistics = true;
        this.ShowActivity = false;
        this.ShowSettings = false;
    },
    DoShowActivity: function(event){
        this.ShowHome = false;
        this.ShowStatistics = false;
        this.ShowActivity = true;
        this.ShowSettings = false;
    },
    DoShowSettings: function(event){
        this.ShowHome = false;
        this.ShowStatistics = false;
        this.ShowActivity = false;
        this.ShowSettings = true;
    }
  }
});

我可能做错了，但是在我找到数十个教程之后，我一生都无法重现有效的onclick方法。控制台也没有告诉我任何事情。

这个想法是，稍后我将创建依赖于那些“ Show *”变量的字段的内容，以及当我通过调用

从控制台调用该函数时

example.DoShowActivity()

它确实显示另一个div。我想念什么？