Question

我正在尝试在Vue中创建一个菜单列表。我想在用户点击某个项目时调用javascript函数。我有v-for工作正常，菜单按预期显示。但是如何将值传递给我想调用的javascript函数？我有这个：

<a class="dropdown-item" href="javascript:loadNavigation('{{menuItem.name}}')" v-for="menuItem in menuBlock.menuItems">{{menuItem.shortName}}</a>

如何将menuItem.name传递给我的函数？

Answer 1

使您的导航功能成为一种vue方法，并使用v-on:click调用它，如下所示：

<a class="dropdown-item" v-on:click="loadNavigation(menuItem.name)" v-for="menuItem in menuBlock.menuItems">{{menuItem.shortName}}</a>

在vue scripts中：

…
data: {
  …
},
methods: {
  loadNavigation: function (event) {
    // Do your thing
  }
}

Answer 2

喜欢这个

<a v-bind:href="'javascript:function('+message+')'">{{ message }}</a>