vue中使用katex展示数学公式

3,013 阅读1分钟

项目中需要展示一些数学公式,于是找到了katex插件,下面记录下我遇到的坑。

首先我用到了KATEX插件 vue-katex

当我那拿到后台返回数据渲染时候会发现这种警告

因为中文过多,控制台输出大量警告,页面会加载缓慢。 附上github 里面issues方案 方案链接 像问题里面说的一样你修改了strict为false或者ignore后警告依然存在。

然后我查看katex文档发现了自动渲染的功能。

VUE也有相对应的插件vue-a11y-katex传送门

然后完美解决。

当你以为事情就这样结束的时候,你会发现你错了。

当你试用v-for循环时候并没有生效

这时候我门查看源码组件会发现

自动渲染默认ID是根据时间生成的。

然后我猜测渲染出来的时间相通,id只能有一个所以只有第一个ID生效。

于是我给每个组件ID设置了KEY值。

解决!!!

坑了我一天,记录一下。