Question

我有一个

 <v-navigation-drawer>

具有以下代码：

 <v-list-tile
          v-for="(child, i) in item.children"
          :key="i"
          v-on:click.stop="goPage(child.link)"
          @click="{{child.link}}"
        >
          <v-list-tile-action v-if="child.icon">
            <v-icon>{{ child.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{child.text }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list-group>
      <v-list-tile
        v-else
        :key="item.text"
        v-on:click.stop="goPage(item.link)"
        @click="{{item.link}}"
      >
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>{{ item.text }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </template>
  </v-list>

我的menu_itemsArray是

menu_items: [
      {
        icon: "keyboard_arrow_up",
        "icon-alt": "keyboard_arrow_down",
        text: "Members",
        model: false,
        children: [{ icon: "contacts", text: "Membership", link: "/members/" 
        },
        {
        icon: "library_books",
        text: "Report Workspace",
        link: "/publications/workspace/"
      },

        icon: "library_books",
        text: "Load Data",
        Call function
      }]
      },

调用路由器的各种链接加载Vue页面效果很好。我的问题是如何使菜单项之一仅调用一个函数并停留在同一页面上？

谢谢

Answer 1

是的，假设您还需要添加注销按钮。然后可以将其添加到数组中，如下所示。

methods: {
  logout () {
    console.log('Logout clicked!');
  },
  goPage (ref) {
    this.$router.push({ path: ref });
  },
},
data() {
  return {
    menu_items: [{
      icon: "keyboard_arrow_up",
      "icon-alt": "keyboard_arrow_down",
      text: "Members",
      model: false,
      children: [
        { icon: "contacts", text: "Membership", type: 'link', ref: "/page2/" },
        { icon: "input", text: "Sign out", type: 'button', func: this.logout },
      ],
    }]
  }
}

然后v-navigation-drawer应该如下所示：

<v-navigation-drawer app fixed clipped>
  <v-list v-for="(items, index) in menu_items" :key="index">
    <v-list-tile
      v-for="(child, i) in items.children"
      :key="i"
      @click.stop="child.type === 'link' ? goPage(child.ref) : child.func.apply(this)">
      <v-list-tile-action v-if="child.icon">
          <v-icon>{{ child.icon }}</v-icon>
      </v-list-tile-action>
      <v-list-tile-content>
          <v-list-tile-title>{{child.text }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

使用v列表将功能点击与Vue抽屉中的路由器路径相结合

1 个答案: