I am currently working on developing an administrator console for my Android game. This console is being built as a single page web application with the help of Vue.js and iView. The main page features an iView side navigation bar with various menu items. My goal is to link each menu item with a different component that will be displayed on the screen. However, I have run into an issue where the functions like @click, @select, and @change are not triggering the update function for the displayed component. Below is a snippet of the code in question:
<Sider hide-trigger :style="{background: '#fff'}">
<Menu v-bind:active-name="currentActiveBranch" theme="light" width="auto" v-bind:open-names="[currentActiveSection]" accordion>
<Submenu v-for="section in sections" :key="section.title" v-bind:name="section.title">
<template slot="title">
<Icon v-bind:type="section.icon"></Icon>
{{ section.title }}
</template>
<menu-item v-for="branch in section.branches" :key="branch" v-bind:name="branch">{{ branch }}</menu-item>
</Submenu>
</Menu>
</Sider>
My objective is to have the displayed component change whenever a menu item is selected.