Vue, invoke method using its name as a string

Question

In a navbar I have to put a list of buttons. While some are links, others should call a method. (e.g. Home should link to /home and Log out should call a function logOut). Because of the large number of items, it is better to have an array with all the buttons/elements that should be rendered

  items: [
    { divider: true },
    { icon: "tasks", text: "Today", link: "/tasks" },
    { icon: "sticky-note", text: "Notes", link: "/notes" },
    { divider: true },
    { heading: "Label" },
    { icon: "code-branch", text: "Branch" },
    { divider: true },
    { icon: "user", text: "Account", link: "/profile" },
    { icon: "cog", text: "Settings" },
    { icon: "sign-out-alt", text: "Log out", action: "logOut" }
  ]

However, I am not sure how to call a method using its name(the last action in the array above). I saw that in js I could use window[item.action]. Is there something similar in Vue? In other words something like @click="methods[item.action]"

aquilesb · Accepted Answer · 2019-07-15 08:36:08Z

3

You can create a function to receive the method name and parameters and call the method in this function. You can see in this example

handleFunctionCall(functionName, event) {
        this[functionName](event)
    },

<button v-else-if="item.action" @click="handleFunctionCall(item.action, $event)" >{{item.text}}</button>

answered Jul 15, 2019 at 8:36

aquilesb

2,2721 gold badge20 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A Le Dref · Accepted Answer · 2019-07-15 08:35:25Z

1

VueJS is still javascript so yes calling the method by its name should work, although I would suggest to use this[*method_name_here*](); to call the function (In the Vue controller I'm not sure if the window would work).

But as you have an action in your list, have you thought of something like this in your view :

<ul>
    <router-link v-for="item in items" to="item.link" @click="item.action"> 
       {{item.text}}
    </router-link>
</ul>

I'm using router-link directly here but you can wrap in <li> tags

Hope this helps !

answered Jul 15, 2019 at 8:35

A Le Dref

4523 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vue, invoke method using its name as a string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related