Question

在导航栏中，我必须放置按钮列表。虽然有些是链接，但其他应该调用方法。（例如，Home应该链接到/ home，而Logout应该调用logOut函数）。由于项目数量众多，最好有一个数组，其中包含应呈现的所有按钮/元素

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

但是，我不确定如何使用其名称（上面数组中的最后一个动作）调用方法。我在js中看到可以使用window [item.action]。 Vue中有类似的东西吗？换句话说，就像@ click =“ methods [item.action]”

Answer 1

您可以创建一个函数来接收方法名称和参数，然后在此函数中调用该方法。您可以在此example

中看到

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

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

Answer 2

VueJS仍然是javascript，因此可以按其名称调用该方法应该可以，尽管我建议使用this[*method_name_here*]();来调用函数（在Vue控制器中，我不确定window会起作用）。

但是当列表中有action时，您是否认为这样的事情：

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

我在这里直接使用router-link，但是您可以包裹<li>标签

希望这会有所帮助！

Vue，使用其名称作为字符串的调用方法

2 个答案: