Question

我有一个项目列表，我想从JavaScript数组中提供数据：

// HTML
<ul
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action">{{ menuItem.name }}</a>
  </li>
</ul>

// DATA
data () {
  return {
    menuItems: [
      { name: 'Split up', action: this.split('up') },
      { name: 'Split down', action: this.split('down') },
      { name: 'Split left', action: this.split('left') },
      { name: 'Split right', action: this.split('right') }
    ]
  }

  // METHODS
  methods: {
    split (direction) {
    store.actions.openWindow(direction)
    store.actions.closeMenu()
  }
}

但是现在我收到了这个错误：

[Vue warn]: v-on:click="menuItem.action" expects a function value, got undefined

这意味着我错误地传递了action的值。

正确的做法是什么？

Answer 1

我不熟悉vue.js，但是from the documentation，click绑定需要一个函数。

也许您可以尝试以下方法：

menuItems: [
    // split function and arguments
    { name: 'Split up', action: this.split, arg: 'up' }
    // ...
]

然后在你的html：

<ul>
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action(menuItem.arg)">{{ menuItem.name }}</a>
  </li>
</ul>

或者您也可以尝试以下方式：

menuItems: [
    // create a new function
    { name: 'Split up', action: function() { return this.split('up') } }
    // ...
]

HTML中的

：

<ul>
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action()">{{ menuItem.name }}</a>
  </li>
</ul>

如何通过JavaScript对象数组传递带参数的函数？

1 个答案: