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

 

vue利用v-if解决查看更多(组件查看数据)组件内不更新数据的问题:v-if会重新渲染组件,v-show不会
vue利用v-if解决查看更多(组件查看数据)组件内不更新数据的问题:v-if会重新渲染组件,v-show不会
vue利用v-if解决查看更多(组件查看数据)组件内不更新数据的问题:v-if会重新渲染组件,v-show不会

vue利用v-if解决查看更多(组件查看数据)组件内不更新数据的问题:v-if会重新渲染组件,v-show不会

上一篇:欧拉计划难度15—25%的好题题解


下一篇:把阿里图标库的图标生成代码并应用于项目中