vue利用v-if解决查看更多（组件查看数据）组件内不更新数据的问题：v-if会重新渲染组件，v-show不会

组件内传入数据，每次点击查看详情都会调用详情组件，容易出的问题是组件内调用数据实在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);
    },
}