Как вы можете передать реквизит в модальный диалог в vuejs?

Question

В приложении Vuejs у меня появляется модальное диалоговое окно, когда пользователь нажимает кнопку. Мне нужно передать опору в этот модальный компонент. Обычно у меня нет проблем с передачей реквизита дочерним компонентам. Почему этот случай отличается? Я бы предпочел не хранить никаких данных в магазине, если этого можно избежать. Когда модальное окно открывает prop, тип partner не является пустой строкой, то есть он не регистрирует новое значение пропуска, которое передает родитель, но вместо этого сохраняет начальное значение, установленное при монтировании родительского компонента. Эта опора должна быть отзывчивой.

Родительский компонент...

    <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>

Дочерний модальный компонент...

    <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>

Answer 1

Я считаю, что, учитывая, что вы используете jQuery, код jQuery выполняется до того, как значение свойства будет передано в дочерний компонент.

Попробуйте обернуть код jQuery в метод $nextTick и посмотреть, работает ли он. Примерно так: this.collaboratorToEdit = сотрудник;

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

Я провел несколько экспериментов с этим пером и смог увидеть, как код в функции не ожидает распространения значения свойства (как оно есть у вас) и как его ждет при использовании $nextTick.

Дайте мне знать, если это работает.