將 Vue2 綁定變量傳遞給錨標記中的 javascript 函數

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>