Javascript MathJax并不总是使用Vue筛选列表进行渲染

我试图在Vue中使用MathJax呈现的方程构建一个过滤列表，它似乎有一些问题，因为方程在第一次加载时呈现，但当我搜索术语时，有些方程呈现，有些不呈现，我不明白为什么。 基本上，在第一次加载时，如果我在搜索栏中键入一个字符，所有内容都会正确呈现，但当我搜索更多内容，或删除它并再次执行时，它不会正确呈现，正如您在这些图像中所看到的：

我的Vue代码如下所示：

var analisiMatematica = new Vue({

el: '#searcher',
data: {
    searchQuery: '',
    isResult: false,
    results: [],
    //json: 'json/analisimatematica.json',
    error: ''
},

mounted: function() {
    axios.get('./json/analisimatematica.json')
    .then(function(response) {
        this.results = response.data.Domande;
        console.log(this.results);
    }.bind(this))
    .catch(function(error) {
        this.error = error.data;
        console.log(error.data);
    }.bind(this));
},

methods: {
    removeSearchQuery: function() { 
      this.searchQuery = '';
      this.isResult = false;
    },
    submitSearch: function() {
      this.isResult = true;

    }
},
computed: {
    filteredObj: function() {
        var list = [];
        this.results.forEach(function(el) {
            if(el.domanda.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1) {
                list.push(el);
            }
        }.bind(this))
        return list;
    }
}


});

MathJax加载到我的html文件的

中，如下所示：

<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/latest.js?config=TeX-MML-AM_CHTML">
</script>

<div id="searcher">
            <p v-show="error" v-html="error"></p>
            <form class="searchForm" v-on:submit.prevent="submitSearch">
                <input type="text" name="queryInput" v-model="searchQuery" placeholder="Che domanda cerchi?" @keyup="submitSearch">
                <span v-show="searchQuery" class="removeInput" @click="removeSearchQuery">+</span>
            </form>
            <div class="results" v-show="isResult">
                <ul>
                    <li v-for="result in filteredObj">
                        <p id="domanda">{{ result.domanda }}</p>
                        <p id="risposta">{{ result.risposta }}</p>
                    </li>
                </ul>

            </div>
        </div>

MathJax.Hub.Config({
tex2jax：{
inlineMath:[['$'，'$']，[“\\（“，“\\）”]，
}
});

vue应用程序部分如下所示：

<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/latest.js?config=TeX-MML-AM_CHTML">
</script>

<div id="searcher">
            <p v-show="error" v-html="error"></p>
            <form class="searchForm" v-on:submit.prevent="submitSearch">
                <input type="text" name="queryInput" v-model="searchQuery" placeholder="Che domanda cerchi?" @keyup="submitSearch">
                <span v-show="searchQuery" class="removeInput" @click="removeSearchQuery">+</span>
            </form>
            <div class="results" v-show="isResult">
                <ul>
                    <li v-for="result in filteredObj">
                        <p id="domanda">{{ result.domanda }}</p>
                        <p id="risposta">{{ result.risposta }}</p>
                    </li>
                </ul>

            </div>
        </div>

+


{{result.domanda}
{{result.risposta}

更改

filteredObj

时，只需再次渲染即可。观察过滤程序

watch: {
    filteredObj: function () {
      if ('MathJax' in window) {
        this.$nextTick(function() { 
           MathJax.Hub.Queue(["Typeset",MathJax.Hub, document.body])
        });
      }
    }
}

var analisiMatematica=新Vue({
el:“#搜索者”，
数据：{
searchQuery:“”，
结果：错，
结果：[]，
//json:'json/analisimatematica.json'，
错误：“”
},
挂载：函数（）{
this.results=[{domanda:'$a+b=c$'，risposta:'$a+b=c$}]
},
方法：{
removeSearchQuery:函数（）{
this.searchQuery=''；
this.isResult=false；
},
submitSearch:function（）{
this.isResult=true；
}
},
计算：{
filteredObj:function（）{
var列表=[]；
this.results.forEach（函数（el）{
if（el.domanda.toLowerCase（）.indexOf（this.searchQuery.toLowerCase（））>-1）{
列表。推送（el）；
}
}.绑定（本）
退货清单；
}
},
观察：{
filteredObj:函数（）{
if（'MathJax'在窗口中）{
这是.$nextTick（函数（）{
Queue（[“Typeset”，MathJax.Hub，document.body]）
});
}
}
}
});

MathJax.Hub.Config({
tex2jax：{
inlineMath:[['$'，'$']，[“\\（“，“\\）”]，
}
});

+


{{result.domanda}
{{result.risposta}


它无法找到
窗口。MathJax
尝试
if（'MathJax'在窗口中）{
好了，现在它可以工作了，没有arrow函数怎么写呢？因为如果我用经典的方式写它，它会触发一个错误。有一件事，我觉得也许我可以在这里得到帮助，因为它可能与mathjax有关，有时在渲染中，另一个公式出现在元素的第二行，而对象继续如果正确的数据（在控制台中选中），页面将显示另一个不应该存在的字符串\公式，如图所示。您认为它与mathjax有关还是完全是另一个问题？我无法确定问题所在，除了这个小问题之外，所有问题都正常工作。@Orkhan Alikhanov