Question

我一直在将Vue与MathJax结合使用，以创建从json文件中检索到的问题和答案的过滤后，可搜索的列表。除了一件事之外，一切都按预期工作，某些渲染的MathJax函数在不需要的问题和答案中显示，甚至json对象在控制台中返回正确的值。

如您在此屏幕截图中所见：

控制台中的json对象返回正确的答案（每次我更改输入内容时都会打印出来），但是页面上还有另一行，其功能与该信息无关，与第一个结果的问题相同，还有其他的文字和功能。这里可能是什么问题？

这是Vue代码：

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])
            });
          }
        }
    }


});

您可以在watch中看到，每次过滤列表更改时，mathjax都会重新呈现。

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应用程序部分：

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

带有Vue过滤列表的MathJax，呈现的函数在不应该重复的地方重复

0 个答案: