vue组件被复用 视图无法更新问题

问题描述:在列表页点击新增按钮和点击修改按钮跳转的是同一个页面,但是组件会被复用 点击新建按钮跳转新建页面后 再点击修改按钮 由于路由相同 页面组件被复用 导致页面数据不更新 form表单取到的数据不会显示在页面上

解决思路:因为跳转修改页面会传一个userId 新增页面没有  所以通过watch监听路由参数变化: 1.当userId为undefined时,清空页面数据,即为新增页面

2.当userId有值且当前页面的userId与本次路由传参中的userId值不相同时 重新获取页面数据 

代码如下:

watch: {
  '$route'(to, from) {
      if (to.query.userId !== this.userId || to.query.userId == undefined) {
          this.formSubmit = {
              nickName: '',
              birthday: '',
              nation: '',
              sex: '',
              politicsStatus: '',
              healthCondition: '',
              schoolTag: '',
              education: '',
              major: '',
              post: '',
              postName: '',
              postMajor: '',
              roleIds: [],
              status: '',
              userName: '',
              password: '',
              deptId: '',
              address: '',
              email: '',
              phonenumber: '',
              idNumber: '',
              majorIn: [],
              isCant: [],
              isTrain: '',
              trainTime: '',
              avatar: '',
              workHistory: '',
              remark: '',
              userId: undefined,
          }
          if (to.query.userId !== undefined) {
               this.handleData(to.query.userId)
          }
       }
   }
},

清空页面数据时 如果直接通过this.formSubmit = { } 更改,数据回显时 input中的内容将不能更改 会出bug 能力有限 想不到其他方法 只能单独改

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值