nuxt.jsbulmabuefy

Passing props in buefy/bulma modal component (nuxtjs)


How do you pass a props to a custom component that you want to use as a template for your Buefy/Bulma modal?

This is how I declare the component


import myCustomComponent from '~/components/myCustomComponent'

export default {
  components: {
    myCustomComponent ,
  },
  methods: {
  openModal(prop) {
      this.$buefy.modal.open({
        parent: this,
        // here I want to pass my 'prop' to myCustomComponent
        // the equivalent of <myCustomComponent :prop='prop' />
        component: myCustomComponent,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
  }

How do you pass the prop to the component? Thanks.


Solution

  • I know it's a super late reply, but hopefully this helps anyone else looking at this in the future.

    import myCustomComponent from '~/components/myCustomComponent'
    
    export default {
      components: {
        myCustomComponent ,
      },
      methods: {
      openModal(prop) {
          this.$buefy.modal.open({
            parent: this,
            component: myCustomComponent,
            props: {
                // You can pass your props to the component here
                prop
            },
            hasModalCard: true,
            customClass: 'custom-class custom-class-2',
            trapFocus: true,
          })
        },
      }