Vue: передача имени метода onclick через реквизит

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], но это тоже не работает.

решение, вероятно, очень простое, но я не вижуэто прямо сейчас.Как я могу передать метод ИМЯ?(например, для минимизации, я хочу иметь методы, определенные один раз в этом компоненте карты, и просто передать имя, чтобы использовать его повторно.)

спасибо:)

Answer 1

передать button в качестве параметра для метода, подобного:

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

в ваших методах:

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

Answer 2

Как насчет использования вспомогательного метода ..

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 3

может быть попробовать @click.capture.stop="eval(button.fn).call()"

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