Question

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

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

我已经找到了解决这个问题的方法，正如您在下面的代码中所看到的那样，但它依赖于捕获引导程序＆＃39; show modal＆＃39;事件。有没有更清洁的方式来做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">

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

使用Vue.js时如何显示新的bootstrap模态数据

0 个答案: