Vue：通过道具传递 onclick 方法名称答案

【问题标题】：Vue: passing onclick-method name via propsVue：通过道具传递 onclick 方法名称
【发布时间】：2019-04-28 14:14:08
【问题描述】：

我想在循环中创建组件，按名称将属性传递给子组件。

所以： <card-base v-for="(card, i) in cards" :key="i" :heading="card.heading" :width="card.width" class="dashboard-card" :cardHeaderButtons="[{icon: 'minimize', fn: 'minimizeDashboardCard'}]">

在我的（孩子！）组件中，我定义了minimizeDashboardCard 方法，和

                <v-btn icon flat class="header-button" v-for="(button, i) in cardHeaderButtons"
                       :key="i"
                       v-if="$vuetify.breakpoint.lgAndUp"
                       color="white"
                       @click.capture.stop="button.fn"
                >
                    <v-icon>
                        {{ button.icon }}
                    </v-icon>
                </v-btn>

{{ button.icon }} 有效。但fn没有

Uncaught TypeError: button.fn is not a function
    at !click (CardBase.vue?ac7a:32)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

我也试过this[button.fn]，但这也不起作用。

解决方案可能非常简单，但我现在看不到。我怎样才能通过方法名称？（就像最小化一样，我想在该卡片组件中定义一次方法，只需传递名称即可重用它。）

谢谢:)

【问题讨论】：

正如你现在所拥有的，button.fn 被定义为一个字符串。如果minimizeDashboardCard 是父作用域中的方法，只需传递函数即可。 fn: minimizeDashboardCard
但 minimizeDashboardCard 仅在子级中定义。这就是为什么我想传递字符串而不是在我在应用程序周围使用它的每个地方定义“最小化”方法。（编辑原始问题以明确该方法仅在子方法中定义）

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

使用辅助方法怎么样..

methods: {
  ...
  call(methodName) {
    this[methodName]()
  }
}

然后你可以在你的模板中做到这一点..

 <v-btn icon flat class="header-button" v-for="(button, i) in cardHeaderButtons"
                       :key="i"
                       v-if="$vuetify.breakpoint.lgAndUp"
                       color="white"
                       @click.capture.stop="call(button.fn)"
>

【讨论】：

【解决方案2】：

也许可以试试@click.capture.stop="eval(button.fn).call()"

https://www.w3schools.com/js/js_function_call.asp

【讨论】：

不幸的是：/ Uncaught TypeError: button.fn.call is not a function at !click (CardBase.vue?ac7a:32) at invoker (vue.esm.js?efeb:2027) at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)（有和没有括号）
现在可以工作，但我认为它具有辅助功能更清洁。但感谢您的帮助:)

【解决方案3】：

将button 作为参数传递给类似的方法：

   @click.capture.stop="callBtn(button)"

在你的方法中：

  methods:{
      callBtn(button){
       button.fn();
       }
    ...  
     }

【讨论】：

没有用，它仍然会尝试“调用” fn （这是一个字符串）。与 Husam 的回答有关，它现在起作用了。谢谢大家！