twitter-bootstrap - 使用 Vue.js 时如何显示新的 Bootstrap 模式数据

Question

我有一个关于我们的客户(即客户)的记录表。当用户单击它们时，它会加载一个 Bootstrap 模式，其中包含表单中的客户详细信息。然后用户可以编辑并提交表单。

表格是由 Vue 组件输出的，模态是 Vue 子组件。当用户单击第一条记录时，它会填充模式并显示它，这很好。问题是，当用户关闭模式并单击另一条记录时，模式将打开并显示第一条记录中的数据。

我找到了解决这个问题的方法，正如您在下面的代码中看到的那样，但它依赖于捕获 Bootstrap “显示模式”事件。有没有更干净的方法来使用 Vue 来做到这一点？当在父组件中选择记录时，会重置子组件中的数据吗？

    export default {
    props : [
        'client_id',
        'name',
        'job_code',
        'is_default'
    ],
    data() {
        return {
            localJobCode : '',
            localIsDefault : ''
        }
    },
    methods : {
        doSave() {
             // ....
        }
    },
    mounted() {
        let self = this;
        $(this.$refs.EditClientModal).on('show.bs.modal', function () {
            self.localJobCode = self.job_code;
            self.localIsDefault = self.is_default;
        });
    }
}

在模板 I 中，模态元素有一个 ref 标签，如下所示:

<div class="modal fade" id="edit-client-modal" tabindex="-1" ref="EditClientModal">

如您所见，我正在创建 Prop 的本地副本(因为显然我不想改变子项中的值)。 mounted() 方法中的代码是我每次显示模态时刷新数据的唯一方法。我错过了什么吗？

Answer 1

您可以将模态组件包装在 div 中并为其绑定(bind)一个唯一的键。当按键更改时组件将再次重新创建

<div class="modal-wrapper" :key="client_id">
  <div class="modal fade" id="edit-client-modal" tabindex="-1" ref="EditClientModal">
  </div>
</div>