MathJax с отфильтрованным списком Vue, обработанная функция повторяется там, где она не должна - PullRequest
Новая
       15

MathJax с отфильтрованным списком Vue, обработанная функция повторяется там, где она не должна

0 голосов
/ 27 мая 2019

Я использую Vue с MathJax для создания отфильтрованного списка вопросов и ответов с возможностью поиска из файла json.Все работает, как и ожидалось, кроме одного, некоторые визуализированные функции MathJax показываются в вопросах и ответах, которых не должно быть, даже если объект json возвращает правильные значения в консоли.

Как вы можете видеть на этом скриншоте:

enter image description here

Объект 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>
...