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);
    },
}