gpt4 book ai didi

javascript - mathjax + vue 不重新渲染方程式

转载 作者:搜寻专家 更新时间:2023-10-30 22:17:21 27 4
gpt4 key购买 nike

我正在构建一个 vue 应用程序,我想使用 MathJax渲染方程式。我可以在安装组件时得到要渲染的方程式但我无法在稍后重新渲染方程式。

我做了一个code sandbox example来证明这一点。尝试更改输入中的 latex 方程式,即使控制台显示观察程序正在运行,也没有任何变化。

有人可以向我解释我做错了什么吗?

我使用以下配置在 index.html 的头部通过 cdn 添加了 mathjax

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'],['\\(','\\)']],
}
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML"></script>

这是我的应用程序组件中的代码

<template>
<div id="app">
<input v-model="latex"/><br>
<div>{{latex}}</div>
</div>
</template>

<script>
export default {
name: "App",
data() {
return {
latex: '$$\\frac{a}{b}$$'
}
},
methods: {
reRender() {
if(window.MathJax) {
console.log('rendering mathjax');
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub], () => console.log('done'));
}
}
},
mounted() {
this.reRender();
},
watch: {
latex: function() {
console.log('data changed')
this.reRender();
}
}
};
</script>

最佳答案

我可以通过添加 2 个东西来让它工作。

https://codesandbox.io/s/x2mlq38m4z

  1. 添加 key到分区。 key是虚拟 DOM 的指标。当key同理,Vue 可能会复用同一个 div 元素。当key更改后,Vue 将呈现一个全新的 DOM 元素,当您想从头开始将第 3 方库的代码 (MathJax) 应用到 DOM 时,这会很有帮助。

    <div :key="latex">{{latex}}</div>

  2. 使用 $nextTick以便在 DOM 更新后重新渲染。

像这样

  watch: {
latex: function() {
console.log('data changed');
this.$nextTick().then(()=>{
this.reRender();
});
}
}

关于javascript - mathjax + vue 不重新渲染方程式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52636554/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com