首页 > 其他 > 详细

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

时间:2021-09-02 00:35:42      阅读:8      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/zbbk/p/15211481.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!