How can you pass props into a modal dialog in vuejs?

Question

In a Vuejs app, I have a modal dialog box pop up when user clicks a button. I need to pass a prop into this modal component. Normally, I have no trouble passing props to child components. Why is this case different? I'd rather not store any data in the store if avoidable. When the modal opens the prop collaboratorSelected is an empty String, i.e. it does not register the new prop value the parent is passing, but instead keeps the initial value set when the parent component mounts. This prop needs to be responsive.

Parent component...

    <template>
      <div>
        <div v-for="collaborator in collaborators">
            <a href="#" @click.prevent="showEditShare(collaborator)" class="dropdown-item">Edit</a>
        </div>
       <EditShare @editedShare="editedShare" :collaboratorSelected="collaboratorToEdit" ref="modal" ></EditShare>
      </div>
    </template>

    <script>
        import axios from "axios";
        import store from "../store.js";
        import EditShare from "@/components/EditShare";
        import $ from "jquery";
        export default {
          name: "Share",
          data() {
            return {
              collaboratorToEdit: "",
              collaborators: ["1", "2", "3"]
            };
          },
          components: {
            EditShare
          },
          methods: {
            showEditShare(collaborator) {
              this.collaboratorToEdit = collaborator;
              let element = $('#editShare');
              $(element).modal('show');
            }
        }
    </script>

Child modal component...

    <template>
      <form @submit.prevent="handleSubmit">
        <div class="modal" tabindex="-1" role="dialog" id="editShare">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <div class="modal-title card-title-bigger">Add Share</div>
                    {{collaboratorSelected}}
              </div>
            </div>
          </div>
        </div>
      </form>
    </template>

    <script>
        import axios from "axios";
        import store from "../store.js";
        import $ from "jquery";
        export default {
          name: "EditShare",
          props: {
            collaboratorSelected: String
          },
    </script>

What do you mean by "with no test"? What value does this.collaboratorToEdit have when the modal opens? — arapl3y
I edited the question to explain the "no test". As expected, the variable collaboratorToEdit has the value "1", "2" or "3" depending on what the user selects in the list created by the v-for loop. The problem is the child modal component's prop does not adopt this value. — GNG
jQuery might totally mess with Vue. Were u considering to use vue styles/transitions instead? — Michael Kurowski
Everything seems to be fine but maybe it is related to the fact that you're using jQuery and probably the property updates after you open the modal. Try putting the 2 lines of code that grab #editShare and then show the modal in a $nextTick function and that might help vuejs.org/v2/api/#vm-nextTick — Jair Reina

Jair Reina Jair Reina · Accepted Answer · 2019-08-03T18:15:48

I believe that given that you're using jQuery, the jQuery code is executing before the property value is propagated to the child component.

Try wrapping the jQuery code in a $nextTick method and see if that works. Something like this: this.collaboratorToEdit = collaborator;

  this.$nextTick(function(){
    let element = $('#editShare');
    $(element).modal('show');
  });

I did some experiments in this pen and I was able to see how the code in the function doesn't wait for the property value to propagate (as you have it) and how it waits for it when using $nextTick.

Let me know if it works.

How can you pass props into a modal dialog in vuejs?

1 Answers