因业务需要,在公司负责了一个项目兼容到IE9及以上的任务,然后发现一个问题,话不多说先上代码
在table标签中使用了template、v-for嵌套循环生成tr标签,在谷歌浏览器下正常显示,而在IE11、IE10下,整个table标签无法显示,报错如下
图中报错未定义的item1,其实是我在最外层v-for循环的时候用到的变量名,按道理不应该有问题才对,这个报错也让我一脸懵逼,上度娘搜索也没有搜到合理的解释,最后借助某位兄弟的提示加上自己的推敲,得出了以下结论:
table下面使用了<template v-for="">进行循环然后生成的tr,在IE11、IE10会因为无法识别为有效元素而过滤掉,基于这个结论也就不难解释为什么会报item1未定义,由于循环的语句无法识别被过滤掉,而写在嵌套内层循环的对象为外层的item1,识别时会报对象错误,(ps:不是说循环不会被识别吗,那怎么还会识别?识别肯定是会跑的,识别不了才过滤嘛),而我只在循环语句中定义了item1这个变量名,自然会出现item1未定义的情况。
至于解决方案,也算不上解决方案,既然IE11、IE10的table会出现这个问题,那就避免在table下这样去写代码,不然做兼容IE的时候你就后悔了,ps:我试过列表<ul><li>在IE11、IE10下并不会有这样的问题,可以正常显示
目前来说确实还没有办法解决这个问题,这本身就是IE浏览器解析的bug,而有人会问,如果就是要使用table标签这样做呢?那我解决不了,还得等大神来解决,不过,倒是可以用兼容的方式去做,在IE11、IE10下使用其它标签,而在谷歌、其它浏览器依旧使用table,这样其实影响是最小的,不过要做两套代码块,其实是标签名换一下就行,内容都可以不用换,至于怎么去兼容,网上有一大堆解释,可以参考 (ps:我的项目就是做的2套代码,但是在IE11、IE10下依旧出现这个问题item1未定义,解决方法很挫,没有就在vue文件里面给他定义一个,只用来解决报错,并不会参与最终的代码运行当然,避免和其他已定义的数据重名)
注意:只有嵌套生成tr时才会报错,单层的话并不会报错,但是肯定不会渲染成想得到的效果
本人第一次写简书,只是想把自己的想法分享出来,如果说的不对,还希望大家提出了