Passing props in buefy/bulma modal component (nuxtjs)

user_9944937 0
Viewed 288

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.

buefy bulma nuxt.js
1 Answers

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,
      })
    },
  }
user_18447790
Related