VUE项目开发遇到的各种小问题(持续更新)

需求一

如图：

图1.底部导航

导航小图标对应10个img，要实现底部导航切换，对应的图标也替换成响应的绿色的img

出现问题

Vue循环数组改变其中某一项的属性，视图不会重新渲染

解决方案

1.引入：静态图片想动态添加绝对路径或相对路径的src的话，必须用将路径用require('图片路径')

2.点击切换图片：<router-link></router-link>绑定click事件必须用@click.native="handleClick"

3.点击的同时触发渲染click事件处理数组变化，并立即响应重新渲染页面需要：

​ 调用方法：Vue.set( target, key, value )

​ target：要更改的数据源(可以是对象或者数组)

​ key：要更改的具体数据

​ value ：重新赋的值

【tip】 vm.$set 实例方法也可以实现

需求二

要做图片轮播，图片数据暂时用mock.js模拟接口返回

出现问题

Mock.mock('/api/getSwiperList', 'get', (option) => {

debugger; //debug一直进不去，换成post就可以了

})

解决方案

Moke.js本身对GET请求的支持不是很友好！

举个例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=12，因为不等于 /user/getUserInfo 就拦截不到。

想使用get又想传参的话，可以再看一下mockjs中的Mock.mock( rurl, rtype, template )，具体使用也可以参考原博客：

https://blog.csdn.net/dadiyang/article/details/82825163