Question

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

所以： <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]，但这也不起作用。

该解决方案可能超级简单，但我现在看不到。如何通过NAME方法？（就像最小化一样，我想在该卡组件中定义一次方法，而只需传递名称即可重复使用。）

谢谢：）

Answer 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)"
>

Answer 2

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

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

Answer 3

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

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

在您的方法中：

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

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

3 个答案: