Passing properties by events

Asked

Viewed 73 times

1

I have a component in which in it is just a modal which has the following header:

<b-modal id="mdgroup"  ref="mdgroup" size="lg" title="Nova categoria de receita"  @ok="save" ok-title="Salvar" cancel-title="Cancelar">

In the parent component, where this modal is I would like to call it by clicking on a kind of button:

<a href="#" v-on:click="showModal()"><icon name="eye" scale="1.6"></icon></a>

I can call her good, like this:

showModal(){
    this.$root.$emit('bv::show::modal','mdgroup')
}

But the question is, how can I pass some value as property to that modal? There is another way to call it without having to issue event?

vue.js
  • 2

    If the modal is a component that is within that component use props its purpose is for this, the emit is to notify the parent component that an event has occurred in the child component.

  • Ta, but how would I call this component when clicking the button?

  • 1

    For example, assuming you have a component with order details. You could pass a boolean variable to this component, this would make the modal opening and closing control, example <detalhes-pedido&#xA; :opened="opened"&#xA; /> (That goes in the parent component). When you click on a button that should open the modal just change this variable of false for true. In the child component you should receive this variable with a props like this: props: ['opened'],

1 answer

0

I assume you’re using the bootstrap-Vue library.

The component in question (b-modal) sets out the methods of hide and show see the example in the official documentation: https://bootstrap-vue.js.org/docs/components/modal/

the secret is in

<b-modal ref="my-modal" />

the directive ref is from Vue himself, you can learn more about her here: https://br.vuejs.org/v2/api/index.html#ref

and in js you can access the component instance in this way

showModal() {
   this.$refs['my-modal'].show()
},

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.