侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 1 条评论

实习日记 06

admin
2022-06-09 / 0 评论 / 18 阅读 / 正在检测是否收录...

实现了一个页面,用到了图片和文字居中,echart,vant样式,所有的数据都是通过后端接口获得。

学到了一个查看发送请求状态以及返回信息的方法,F12---network---Use large request rows

难点1:服务器传过来的数据与echart需要的格式不同

传过来的格式

rows:[
  {
  "aa.bb":123,
  "cc.dd":234,
  }
  ...
]

需要的格式则是对象里有data1和data2两个数组,两个数组分别是传来数据的第一项和第二项

data:{
  data1: [],
  data2: []
}

需要对传过来的数据进行处理

let result = res.rows
this.data.data1 = result.map((x) => x["aa.bb"])
this.data.data2 = result.map((x) => x["cc.dd"])
//传过来的数据第一项为空,所以又用了pop

之所以使用x["aa.bb"]格式,是因为传递过来的数据带.

map():默认三个参数分别是value,index,arr

难点2:前提是父组件中有A和B两个页面进行互相切换,A页面和B页面中的data有个数据名称是一样的,他们的数据都是从各自的接口获取的,从A页面跳往B页面,B页面中所显示的数据是A页面的,但是在B页面状态下刷新就是B页面的数据,最终解决办法将重名数据改名。

解决方案一:监听$router,监听到router发生变化的时候this.reload()重新加载页面
watch除了可以监听data,还可以监听props,$router,$emit,computed
解决方案二:导航首位
解决方案三:路由跳转的router-view中添加:key="$route.fullPath",这个方案能够加载整个组件。

难点3:修改子组件样式不一定非要在子组件内部修改,也可以在父组件中调用子组件的外部包裹一个div,然后利用穿透进行修改。

解决这个问题的时候想到了nextTick(),后来发现不行,需要回顾一下nextTick的知识。

知识点1:data中拿不到this,如果需要拿到this需要通过created中处理。

0

评论 (0)

取消