Modal Assync Vuejs

Asked

Viewed 512 times

0

Tó trying to make a reusable modal vuejs passing an object for editing or registration but I am locked in the way to pass the object asynchronously, since the object I want to pass will be changed when the user clicks the edit button for example.

The template is listed below:

<template>
    <div>
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>

            </div>
            </div>
    </div>
</template>

<script>
export default {
  props: {
    propE: {
      type: Object
    }
  },
  mounted() {},
  data() {
    return {};
  },
  methods: {
  }
};
</script>

On the other hand, Component with the name "modalDinamic" has been added Given the object in the form of :

Prop:{
   jose:'Miguel'
}

The statement remained:

<modal-dinamic :propE="Prop"></modal-dinamic>

To be more clear, in the parent element will have a method that will say that 

this.Prop={
    jose:'joaquin'
}

and thus gives a $('#myModal'). show(); I hope I’m clear now.

vue.js modal

  • Can you show what you already have? or create a code example?

  • I added more data as you requested, created an example code

  • Props are passed by reference. Are you sure the problem you’re describing really exists? Maybe I’m the one who didn’t get it right. That’s the one Prop is an object? then in modal you can access via this.propE.

  • The problem is that this Prop will be updated, and the data is passed as if it were the first value that the object assumes, and the need is that it be dynamic.

  • But as an object, the changes you make in one place are accessible elsewhere. Can you set an example that works with the problem? I’m happy to help

  • This Modal is jQuery?

  • Bootstrap, I used it for making the job easier

  • And the above example the problem occurs.

  • On the Vuejs website you have the example of modal, follow link: https://br.vuejs.org/v2/examples/modal.html. I hope you help.

Show 4 more comments

2 answers

0

Good afternoon, my friend! I have been through the same dilemma, and researched a lot, I ended up concluding that the best solution for my case was to call a child component method within the parent component through $refs, I’ll show you my code example:

Parent component "customers":

this.$refs.clienteDialog.show(cliente);

Child component "clientDialog":

show(cliente) {
            this.dialog = true;
            this.cliente = { ...cliente };
}

0

First I would recommend instantiating the CRUD object only when necessary. So:

<modal-dinamic :propE="Prop" v-if="exibirModal"></modal-dinamic>

Another option would be to control the opening of a modal with an Event. Search for this. $Emit

You could even pass the object by parameter at this time

I hope I’ve helped

Browser other questions tagged vue.js modal

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