Question

我正在尝试使用MathJax渲染的方程式在Vue中构建过滤列表，这似乎存在一些问题，因为方程式是在第一次加载时渲染的，但是当我搜索术语时，一些方程式会渲染而另一些不，我不明白为什么。基本上是在第一次加载时，如果我在搜索栏中键入一个字符，一切都会正确显示，但是当我搜索更多或删除并再次执行该操作时，一切都不会正确显示，就像在这些图像中看到的那样：

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

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

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

1 个答案: