CODEWITHSUNDEEP
vue.js
Bill
Bill

Reputation: 1477

Combining function clicks with router paths in a Vue Drawer using a v-list

I have a

 <v-navigation-drawer>

with the following code: 

 <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>

And my menu_itemsArray is 

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
      }]
      },

It works fine calling various links to load Vue pages using the Router. My question is how can I make one of the menu items just call a function and stay on the same page?

Thanks

Upvotes: 1

Views: 279

Answers (1)

polyglot
polyglot

Reputation: 862

Yes Let's say you need to add logout button as well. Then you can add it in the array as the following.

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 },
      ],
    }]
  }
}

Then v-navigation-drawer should look like the following:

<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>

Upvotes: 1

Related Questions