Vue之坑

本文探讨了在Vue.js中遇到的视图不刷新问题,详细分析了对象属性更新时视图可能不会立即响应的原因,并提供了相应的解决方案。文章指出,在对象初始化时未明确指定所有属性,或者在修改对象属性后未正确更新视图时,可能会导致视图不刷新的问题。通过具体的代码示例,展示了如何避免这些问题,确保视图能够及时响应数据变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 不刷新视图

export default {
  data(){
    return {
      storeInfo: {//对象里不写具体的key,且在赋值时是单个赋值的时候会有不刷新视图的情况
        
      }
    }
  },
  methods: {
      changeStore() {
        //在这修改偶尔会补刷新视图
        this.storeInfo.storeName = '11'
        this.storeInfo.storeCode = '22' 
      }
  }
}
//需要改成一
export default {
  data(){
    return {
      storeInfo: {//对象里不写具体的key,且在赋值时是单个赋值的时候会有不刷新视图的情况
        storeName:'',
        storeCode:''
      }
    }
  },
  methods: {
      changeStore() {
        //在这修改偶尔会补刷新视图
        this.storeInfo.storeName = '11'
        this.storeInfo.storeCode = '22' 
      }
  }
}
复制代码

2 不刷新视图

dealQueryData(res) {
  let dataList = [];
  if(res.data.dataList && res.data.dataList.length) {
    dataList = res.data.dataList;
    this.pager = {
      total: res.data.total,
      totalPage: res.data.totalPage,
      pageIndex: res.data.pageIndex,
      pageSize: res.data.pageSize,
    };
  }else {
    this.pager = {};
  }
  
  if(this.LOGINDATA.member_name_modify_record) {
    dataList.forEach(item => {
      item.isShowViewNameBtn = true;
      item.isShowTrueName = false;
      item.isShowViewPhoneBtn = true;
      item.isShowTruePhone = false;
    })
  }
  //数据修改后统一在下面赋值,如果先赋值再增加新字段,会出现不刷新视图
  this.dataList = dataList

}
复制代码

转载于:https://juejin.im/post/5cc14ba95188252e7b4a43d5

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值