组件内传入数据,每次点击查看详情都会调用详情组件,容易出的问题是组件内调用数据实在mounted,每次挂在完,第二次组件再调用就不会再调用了。
这导致的问题是第一次点击dialog组件有数据,往后每次点击组件内的数据都不会再更新。
解决方案很简单,只要每次点击查看,重新调用下组件即可,即重新渲染组件,组件内自然再次走mounted=》调用最新数据:
主要代码:
<chatSummaryForm v-if="dialogFormVisible" :dialogId="dialogId"></chatSummaryForm>
这里记着,v-if 组件会重新渲染,v-show 组件不更新
<el-dialog title="受理单详情" :visible.sync="dialogFormVisible" width="30%" size="tiny" show-close > <chatSummaryForm v-if="dialogFormVisible" :dialogId="dialogId"></chatSummaryForm> </el-dialog>
import chatSummaryForm from "@/view/common/tabs/chat-summary-form"; // 话后小结表单
chatSummaryForm.vue:
mounted() { console.log(this.dialogId); 这里利用dialogId来调用接口接收数据:更新详情 // this.form = this.acceptInfo this.getAcceptInfo(this.dialogId); }, methods:{ /** * 根据会话id查询详情,查询受理信息 * @param {string} id 会话id */ getAcceptInfo(dialogId) { this.$axios .post(this.$apis.ccweb.newDataSL.selectAcceptInfoById, { dialogId }) .then((res) => { const { code, data } = res; if (code === 200 && data) { console.log(data); this.form = data; // this.workId = data.workId this.formatTreeDate(data); this.showPrise = false; this.showRentPrise = true; } else { this.showPrise = true; this.showRentPrise = false; } }); console.log("this.acceptInfo", this.acceptInfo); }, }