Vue: passing onclick-method name via props

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I want to create components in a loop, passing properties to the child by name.

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

in my (child!) component i have defined the minimizeDashboardCard method,
and

                <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>

the {{ button.icon }} works. but the fn doesn't

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)

i also tried with this[button.fn], but that doesn't work either.

the solution is probably super easy, but i don't see it right now. how can i pass the method NAME? (like for minimize, i want to have methods defined once in that card component and just have to pass the name to reuse it.)

thanks :)

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

1

As you have it now, button.fn is defined as a string. If minimizeDashboardCard is a method in the parent scope, just pass the function. fn: minimizeDashboardCard

– thanksd
Nov 26 '18 at 21:48

but minimizeDashboardCardis only defined in the child. that's why i want to pass strings and not define the "minimize" method in every place i use it around the app. (edited the original question to make it clear the method is only defined in the child method)

– devman
Nov 26 '18 at 21:50

add a comment |

I want to create components in a loop, passing properties to the child by name.

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

in my (child!) component i have defined the minimizeDashboardCard method,
and

                <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>

the {{ button.icon }} works. but the fn doesn't

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)

i also tried with this[button.fn], but that doesn't work either.

thanks :)

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

1

As you have it now, button.fn is defined as a string. If minimizeDashboardCard is a method in the parent scope, just pass the function. fn: minimizeDashboardCard

– thanksd
Nov 26 '18 at 21:48

but minimizeDashboardCardis only defined in the child. that's why i want to pass strings and not define the "minimize" method in every place i use it around the app. (edited the original question to make it clear the method is only defined in the child method)

– devman
Nov 26 '18 at 21:50

add a comment |

I want to create components in a loop, passing properties to the child by name.

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

in my (child!) component i have defined the minimizeDashboardCard method,
and

                <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>

the {{ button.icon }} works. but the fn doesn't

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)

i also tried with this[button.fn], but that doesn't work either.

thanks :)

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

I want to create components in a loop, passing properties to the child by name.

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

in my (child!) component i have defined the minimizeDashboardCard method,
and

                <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>

the {{ button.icon }} works. but the fn doesn't

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)

i also tried with this[button.fn], but that doesn't work either.

thanks :)

javascript vue.js vuejs2 vue-component

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

edited Nov 26 '18 at 21:53

asked Nov 26 '18 at 21:40

devman

135113

asked Nov 26 '18 at 21:40

devman

135113

asked Nov 26 '18 at 21:40

devman

135113

1

As you have it now, button.fn is defined as a string. If minimizeDashboardCard is a method in the parent scope, just pass the function. fn: minimizeDashboardCard

– thanksd
Nov 26 '18 at 21:48

but minimizeDashboardCardis only defined in the child. that's why i want to pass strings and not define the "minimize" method in every place i use it around the app. (edited the original question to make it clear the method is only defined in the child method)

– devman
Nov 26 '18 at 21:50

add a comment |

1

As you have it now, button.fn is defined as a string. If minimizeDashboardCard is a method in the parent scope, just pass the function. fn: minimizeDashboardCard

– thanksd
Nov 26 '18 at 21:48

but minimizeDashboardCardis only defined in the child. that's why i want to pass strings and not define the "minimize" method in every place i use it around the app. (edited the original question to make it clear the method is only defined in the child method)

– devman
Nov 26 '18 at 21:50

As you have it now, button.fn is defined as a string. If minimizeDashboardCard is a method in the parent scope, just pass the function. fn: minimizeDashboardCard

– thanksd
Nov 26 '18 at 21:48

but minimizeDashboardCardis only defined in the child. that's why i want to pass strings and not define the "minimize" method in every place i use it around the app. (edited the original question to make it clear the method is only defined in the child method)

– devman
Nov 26 '18 at 21:50

add a comment |

3 Answers
3

active

oldest

votes

How about using a helper method ..

methods: {

  ...

  call(methodName) {

    this[methodName]()

  }

}

Then you can do this in your template ..

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

>

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

this worked, thanks!

– devman
Nov 26 '18 at 22:32

add a comment |

maybe try @click.capture.stop="eval(button.fn).call()"

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

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

unfortunately not :/ 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) (both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

add a comment |

pass button as parameter to a method like :

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

in your methods :

  methods:{

      callBtn(button){

       button.fn();

       }

    ...  

     }

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53489498%2fvue-passing-onclick-method-name-via-props%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

How about using a helper method ..

methods: {

  ...

  call(methodName) {

    this[methodName]()

  }

}

Then you can do this in your template ..

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

>

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

this worked, thanks!

– devman
Nov 26 '18 at 22:32

add a comment |

How about using a helper method ..

methods: {

  ...

  call(methodName) {

    this[methodName]()

  }

}

Then you can do this in your template ..

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

>

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

this worked, thanks!

– devman
Nov 26 '18 at 22:32

add a comment |

How about using a helper method ..

methods: {

  ...

  call(methodName) {

    this[methodName]()

  }

}

Then you can do this in your template ..

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

>

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

How about using a helper method ..

methods: {

  ...

  call(methodName) {

    this[methodName]()

  }

}

Then you can do this in your template ..

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

>

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

answered Nov 26 '18 at 22:26

Husam Ibrahim

3,363518

this worked, thanks!

– devman
Nov 26 '18 at 22:32

add a comment |

this worked, thanks!

– devman
Nov 26 '18 at 22:32

this worked, thanks!

– devman
Nov 26 '18 at 22:32

add a comment |

maybe try @click.capture.stop="eval(button.fn).call()"

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

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

unfortunately not :/ 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) (both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

add a comment |

maybe try @click.capture.stop="eval(button.fn).call()"

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

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

unfortunately not :/ 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) (both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

add a comment |

maybe try @click.capture.stop="eval(button.fn).call()"

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

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

maybe try @click.capture.stop="eval(button.fn).call()"

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

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

edited Nov 26 '18 at 22:18

answered Nov 26 '18 at 22:05

Efrat

1,012313

answered Nov 26 '18 at 22:05

Efrat

1,012313

answered Nov 26 '18 at 22:05

Efrat

1,012313

unfortunately not :/ 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) (both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

add a comment |

unfortunately not :/ 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) (both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

unfortunately not :/

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)

(both with and without parens)

– devman
Nov 26 '18 at 22:08

unfortunately not :/

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)

(both with and without parens)

– devman
Nov 26 '18 at 22:08

updated. worked for me

– Efrat
Nov 26 '18 at 22:16

works now, but i think it's cleaner with a helper function. but thanks for your help :)

– devman
Nov 26 '18 at 22:36

add a comment |

pass button as parameter to a method like :

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

in your methods :

  methods:{

      callBtn(button){

       button.fn();

       }

    ...  

     }

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

add a comment |

pass button as parameter to a method like :

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

in your methods :

  methods:{

      callBtn(button){

       button.fn();

       }

    ...  

     }

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

add a comment |

pass button as parameter to a method like :

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

in your methods :

  methods:{

      callBtn(button){

       button.fn();

       }

    ...  

     }

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

pass button as parameter to a method like :

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

in your methods :

  methods:{

      callBtn(button){

       button.fn();

       }

    ...  

     }

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

answered Nov 26 '18 at 22:19

Boussadjra Brahim

8,3153833

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

add a comment |

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

didn't work, it would still try to "call" fn (which is a string). in connection with Husam's answer, it worked now though. thanks to all of you!

– devman
Nov 26 '18 at 22:33

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg