Vue.js – Passing functions in array as a prop

Question

NavigationBar.vue

The component NavigationBar.vue is used throughout my Vue.js application accepts the following props:

props: {
    title: String,
    actions: Array
}

This is the NavigationBar component:

The component accepts the array to generate the action buttons on the right by using v-for. They are defined in the parent file and are different depending on the place in my application. If you click on a button, the specified function needs to be called.

Members.vue

Members.vue is the parent. Notice the component, actions and functions in there:

<template>
    <div>   
        <NavigationBar title='Members' actions="actionsArray" ></NavigationBar
    </div>  
</template>

<script>
import ...

export default {
  name: 'members',
  components: {
    NavigationBar
  },
  data () {
    return {
        actionsArray: [
            { btnText: 'Create', icon: 'mdi-plus-circle', function: 'createBtnClicked()' },
            { btnText: 'Edit', icon: 'mdi-pencil', function: 'editBtnClicked()' },
        ],
  }
  methods: {
    createBtnClicked() {
        // amazing things will happen here
    },
    editBtnClicked() {
        // it will be even greater when this button is clicked
    },
}

</script>

Problem:

I can't get the functions of the buttons to work as they should. Is passing the function as a prop even the right approach?

I would really appreciate some help! Thanks :)

Use slots for the buttons, that will also give you way more flexibility regarding the buttons layout — minychillo
– minychillo, Commented Nov 4, 2020 at 21:58
@minychillo Thanks. I decided to use slots because I came to a point where I needed exactly this flexibility and custom options. — mcd
– mcd, Commented Nov 9, 2020 at 10:12

tony19 · Accepted Answer · 2022-07-15 23:12:43Z

2

You seem to be passing strings and not actual functions.

Try the following:

data () {
    return {
      actionsArray: [
        { btnText: 'Create', icon: 'mdi-plus-circle', function: this.createBtnClicked },
        { btnText: 'Edit', icon: 'mdi-pencil', function: this.editBtnClicked },
      ],
}

Maybe consider declaring explicit prop types to have Vue check values assigned to props have the corect type.

edited Jul 15, 2022 at 23:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 4, 2020 at 21:06

gogo

1,07116 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

forloops Over a year ago

wouldn't using function(){} be better than the arrow function in this case because this is bound to the parent and one of the limitations is arrow functions do not have its own bindings to this or super ??

Dan Over a year ago

There is no need to wrap the functions at all. Just do function: this.createBtnClicked. Notice the lack of parentheses on the end.

mcd Over a year ago

@gogo Thanks for your answer. However I now decided to use slots instead. They give me more flexibility and options in my app.

Collectives™ on Stack Overflow

Vue.js – Passing functions in array as a prop

NavigationBar.vue

Members.vue

Problem:

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

NavigationBar.vue

Members.vue

Problem:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related