1.问题:HTMLCollection 对象可以打印出数据,但是用JS拿不到。
原因:JS执行时,页面中的DOM没有全部加载完,哪怕是在mounted钩子函数中也是一样。
解决方案:利用windows.onload()方法,该方法可以在文档全部加载完成后执行一次。
2.问题:Vue中数据更改了,视图没有更新
原因:由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength
解决方案:Vue.set(vm.items, indexOfItem, newValue) 也可以使用 vm.set(vm.items, indexOfItem, newValue)。由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除
3.问题:当遇到第三方接口地址时,会出现报错跨域问题,或者访问不到的情况。
原因:如果在Vue中使用了axios并设置基准地址,会造成在使用第三方接口地址时,会自动拼接基准地址到接口地址上(开发者工具network中不会出现拼接后的地址),从而访问不到数据。 解决方案:在Vue中可以通过在Vue.config.js中的proxy配置代理地址。
4.问题:mounted钩子函数中请求数据导致页面闪屏问题
原因:其实就是加载时机问题,放在created里会比mounted触发早一点
解决方案:将数据请求放在created中,在页面挂载完之前请求完成的话就不会看到闪屏了
5.问题:如何将表格中对应的表头,替换成可以获取到的两个数据字段的连接字符串
解决方案:可以将两个字段循环遍历拼接在一起,赋值给一个对象,原本表格表头对应的字段当作该对象的key,拼接后的数据当作该对象的value。(适用于表格列是v-for遍历出来的表格)
6.问题:对象,已知key(键),给嵌套对象赋值
示例:obj: { obj1: { str: ‘123’ }
解决方案:obj.obj1[str] = ‘234’,该方式适用于ES版本较高的时候使用
7.问题:在使用element-ui的时间日期组件时,常常会应为没有对生成的日期格式做处理,导致参数虽然传输了,但是会报错的问题。
解决方案:可以直接在el-date-picker标签内加上格式format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"(前提是必须要下载format)
8.问题:使用axios对请求进行传值,数据格式不正确
原因:axios发送的数据格式和jquery ajax发送的默认数据格式却不相同。axios的请求头Content-Type:application/json;chartset=UTF-8,请求参数是Request Payload。 Jquery ajax的请求头Content-Type:application/x-www-form-urlencoded;chartset=UTF-8,请求参数是Form Data。
解决方案:即时是修改了ContentType,数据依然不正确,可以使用URLSearchParams来处理参数,URLSearchParams的兼容性并不高,所以使用的时候还是要注意(可以考虑使用babel来转换)。通过使用URLSearchParams的处理,就能像jquery ajax发送的数据一样了。
9:问题:proxy代理地址调用接口时报404。
原因和解决方案:可能接口地址有问题,如果使用/api代理地址http://127.1.1:3000,那么实际调用的地址就应该是http://127.1.1:3000/api。
10:问题报错
要做写接口调用时加上catch抛出异常
11:使用this.$router.push()进行路由跳转时传参s时,params会在页面刷新时丢失信息而query则保存在地址栏上,不会随着刷新而消失。
vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。
解决方案:在被跳转到的页面或者组件中加上activated()函数和其它的钩子函数同级别。 作用:在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。
12:object[key] = []所生成的数据形式是{ key: [] }
Object.assign()一般是用于对象间的合并,合并后会改变被合并对象的值
例如:a = {a: ‘aaa’} b = {b: ‘bbb’} c = Object.assign(a, b) c: {a: ‘aaa’, b: ‘bbb’} a: {a: ‘aaa’, b: ‘bbb’} b: {a: ‘aaa’, b: ‘bbb’}