MathJax не всегда рендерится с отфильтрованным списком Vue - PullRequest
Новая
       6

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

1 голос
/ 26 мая 2019

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

enter image description here enter image description here

мой код 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 выглядит так: 

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

1 Ответ

1 голос
/ 26 мая 2019

Все, что вам нужно, это вызвать 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>
...