我有一张关于我们的客户(即客户)的记录表。当用户单击它们时,它会加载一个引导模式,其中包含表单中的客户详细信息。然后用户可以编辑并提交表单。
该表由 Vue 组件输出,模态是 Vue 子组件。当用户单击第一条记录时,它会填充模式并显示它,这很好。问题是,当用户关闭模式并单击另一条记录时,模式将打开并显示第一条记录中的数据。
我找到了解决这个问题的方法,正如您在下面的代码中看到的那样,但它依赖于捕获引导“显示模式”事件。有没有更干净的方法来使用 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()
方法是我每次显示模式时都能看到刷新数据的唯一方法。我错过了什么吗?