Vue使用MathJax数学公式无法刷新的问题解决

本文主要是介绍Vue使用MathJax数学公式无法刷新的问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

在弹窗中el-select选择不同公式，显示公式及参数用于简单公式计算器功能。

问题

1. 使用<span>展示公式，只显示第一次渲染的公式，无法刷新，在<el-select>的@change方法中每次将对应值赋空也不行。
2. 参数显示会叠加，之前渲染的不消失。
3. 以上均为渲染刷新的问题。

解决

渲染特定的组件（跟问题没关系，顺手记录）

在组件上绑定id属性，将id传给渲染的方法，如下。渲染的span和form均放在一个<div>标签中，给其赋id：<div id="varCalculate"> </div>

this.$nextTick(function() { // 这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据if (this.commonsVariable.isMathjaxConfig) { // 判断是否初始配置，若无则配置。this.commonsVariable.initMathjaxConfig()}this.commonsVariable.MathQueue('varCalculate')// 传入组件id，让组件被MathJax渲染})

组件强制刷新（方法一：key法）

开始尝试给绑定的变量textVar每次渲染获取数据前赋空，渲染失败。使用强制渲染的方法：vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。（原文链接.）
给需要强制刷新的span和form均绑定了key，实现清除上次渲染的公式重新渲染。

<template><div><span :key="key"></span></div>
</template>
<script>export default {data() {return {key: 0}},methods: {handleUpdateClick() {this.key += 1 }}}
</script>

组件强制刷新（v-if法）

组件中添加：v-if="resetThis"
在该组件数据内容变化的方法里，使用

this.resetThis = false
this.$nextTick(() => {
this.resetThis = true
})

这篇关于Vue使用MathJax数学公式无法刷新的问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---