如何通过名称为v-for循环中的每个元素触发Vue方法？

Question

我在点击v-for循环中的每个元素的名称触发单独的Vue实例方法时遇到了麻烦。

每个action对应一种方法，但不会触发。我做错了什么？

代码：

<v-btn v-for="btn in windowControlButtons" :key="btn.id"
  @click="btn.action"
>
  <v-icon size="20px">{{btn.icon}}</v-icon>
</v-btn>

...
window: remote.getCurrentWindow(),
windowControlButtons: [
  {
    icon: 'remove',
    action: minimizeWindow()
  },
  {
    icon: 'crop_square',
    action: maximizeWindow()
  },
  {
    icon: 'close',
    action: closeWindow()
  }
]

...
methods: {
  minimizeWindow() {
    this.window.minimize()
  },
  maximizeWindow() {
    this.window.maximize()
  },
  closeWindow() {
    this.window.close()
  }
}

更新

我可以直接在data()中触发一些代码，例如：

...
{
  icon: 'remove',
  action:  () => {remote.getCurrentWindow().minimize()} 
},

但是，如果方法不短，该怎么办？

如何触发methods: { }中已指定的方法？

Answer 1

btn.action是一个字符串，因此您无法执行它。

每个Vue实例/组件方法都可以property in the vm.$options.methods object访问。

我建议创建另一种方法，比如handleClick，根据按钮简化方法调用，并从this.$options.methods调用最合适的方法，如下所示。

new Vue({
  el: '#app',
  data: {
    windowControlButtons: [
      {id: 1, icon: 'remove', action: 'minimizeWindow'},
      {id: 2, icon: 'crop_square', action: 'maximizeWindow'},
      {id: 3, icon: 'close', action: 'closeWindow'}
    ]
  },
  methods: {
    handleClick(button) {
      if (this.$options.methods[button.action]) { // guard to prevent runtime errors
        this.$options.methods[button.action]();
      }
    },
    minimizeWindow() {
      console.log('minimizeWindow');
    },
    maximizeWindow() {
      console.log('maximizeWindow');
    },
    closeWindow() {
      console.log('closeWindow');
    }
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>

<div id="app">
  <button v-for="btn in windowControlButtons" :key="btn.id" @click="handleClick(btn)">
    <span>{{btn.icon}}</span>
  </button>
</div>