MathJax 并不总是使用 Vue 过滤列表呈现答案

【问题标题】：MathJax not always rendering with Vue filtered listMathJax 并不总是使用 Vue 过滤列表呈现
【发布时间】：2019-05-26 22:57:07
【问题描述】：

我正在尝试在 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 文件的 <head> 中：

<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>

而vue app部分是这样的：

<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>

【问题讨论】：

标签： javascript vue.js mathjax

【解决方案1】：

您只需要trigger MathJax 在filteredObj 更改时再次渲染。观看filteredObj：

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

var analisiMatematica = new Vue({
    el: '#searcher',
    data: {
        searchQuery: '',
        isResult: false,
        results: [],
        //json: 'json/analisimatematica.json',
        error: ''
    },
    
    mounted: function() {
            this.results = [{domanda: '$a+b=c$', risposta: '$a+b=c$'}]
    },
    
    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;
        }
    },
     watch: {
        filteredObj: function () {
          if ('MathJax' in window) {
            this.$nextTick(function() { 
               MathJax.Hub.Queue(["Typeset",MathJax.Hub, document.body])
            });
          }
        }
    }
    
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>

【讨论】：

找不到window.MathJax
试试if ('MathJax' in window) {
OK 现在可以了，没有箭头函数应该怎么写？因为如果我以经典方式编写它会触发错误。
只是一件事，我觉得也许我可以在这里得到帮助，因为它可能与mathjax有关，有时在渲染中会发生另一个公式出现在元素的第二行，而对象包含正确的数据（在控制台中检查），该页面向我显示了另一个不应存在的字符串\公式，如 here 所示。你认为它与mathjax有关还是完全是另一个问题？我无法确定问题所在，除了这个小东西之外一切正常。 @Orkhan Alikhanov