时间戳

首页 > 解决方案 > 如何将道具传递到 vuejs 中的模态对话框中？

vue.js - 如何将道具传递到 vuejs 中的模态对话框中？

问题描述

在 Vuejs 应用程序中，当用户单击按钮时，我会弹出一个模式对话框。我需要将一个道具传递给这个模态组件。通常，我可以毫无困难地将道具传递给子组件。为什么这个案例不同？如果可以避免，我宁愿不在商店中存储任何数据。当模态打开时，prop collaboratorSelected 是一个空字符串，即它不注册父组件传递的新 prop 值，而是保持父组件挂载时设置的初始值。这个道具需要响应。

父组件...

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

标签： vue.jsmodal-dialogvue-props

解决方案

我相信，鉴于您使用的是 jQuery，jQuery 代码会在属性值传播到子组件之前执行。

尝试将 jQuery 代码包装在$nextTick方法中，看看是否可行。像这样的东西： this.collaboratorToEdit = collaborator;

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

我用这支笔做了一些实验，我能够看到函数中的代码如何不等待属性值传播（正如你所拥有的那样）以及在使用 $nextTick 时它是如何等待它的。

让我知道它是否有效。

推荐阅读