title: How do I highlight search queries using Vue+html
body: <p>Here my search is working but I am a newbie and doesn't know how to use the npm...I am using HTML with VueJS to implement this and successsfully created the search filter but couldn't implement the highlight filter..Some leads are markjs.io that is used and some other custom vuejs filters but couldn't implement them.</p>
  <pre class="lang-js prettyprint-override"><code>class Post {
    constructor(title, link, author, img, course, coursel, cours, coursl, cour, courl, cou, coul, co, col) {
      this.title = title;
      this.link = link;
      this.author = author;
      this.img = img;
      this.course = course;
      this.coursel = coursel;
      this.cours = cours;
      this.coursl = coursl;
      this.cour = cour;
      this.courl = courl;
      this.cou = cou;
      this.coul = coul;
      this.co = co;
      this.col = col;
    }
  }
  const app = new Vue({
    el: &quot;#app&quot;,
    data: {
      search: &quot;&quot;,
      postList: [
        new Post(&quot;abc&quot;, null, &quot;xyz&quot;, &quot;wqw&quot;, &quot;qwe&quot;, &quot;&quot;, &quot; &quot;, null, &quot; &quot;, null, &quot; &quot;, null, &quot; &quot;, null, );
      ]
    },
    computed: {
      filteredList() {
        return this.postList.filter(post =&gt; {
          return post.title.toLowerCase().includes(this.search.toLowerCase()) ||
            post.author.toLowerCase().includes(this.search.toLowerCase()) || 
            post.course.toLowerCase().includes(this.search.toLowerCase()) || 
            post.cours.toLowerCase().includes(this.search.toLowerCase()) || 
            post.cour.toLowerCase().includes(this.search.toLowerCase()) || 
            post.cou.toLowerCase().includes(this.search.toLowerCase()) || 
            post.co.toLowerCase().includes(this.search.toLowerCase());
        });
      }
    }
  });
  </code></pre>
  <p>Here is the HTML code I am using</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;app&quot;&gt;
    &lt;div class=&quot;search-wrapper&quot;&gt;
      &lt;input type=&quot;text&quot; v-model=&quot;search&quot; placeholder=&quot;Search&quot;
        onfocus=&quot;if(this.value==this.defaultValue)this.value=''&quot;    
        onblur=&quot;if(this.value=='')this.value=this.defaultValue&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;col-lg-12 col-md-4 card&quot; v-for=&quot;post in filteredList&quot;&gt;
        &lt;a v-bind:href=&quot;post.link&quot; target=&quot;_blank&quot;&gt;
          &lt;img v-bind:src=&quot;post.img&quot;/&gt; 
          &lt;div style=&quot;line-height:20%;&quot;&gt;
            &lt;br&gt;
          &lt;/div&gt;
          &lt;font size=&quot;2&quot;&gt;{{ post.author }}&lt;/font&gt;
          &lt;div class=&quot;brmedium&quot;&gt;&lt;/div&gt;
          &lt;font size=&quot;5&quot;&gt;&lt;b&gt;&lt;i&gt;&lt;em&gt;{{ post.title }}&lt;/em&gt;&lt;/i&gt;&lt;/b&gt;&lt;/font&gt;
        &lt;a v-bind:href=&quot;post.coursel&quot; title=&quot;View Credential&quot; target=&quot;_blank&quot;&gt;&lt;font size=&quot;3&quot;&gt;{{ post.course }}&lt;/font&gt;&lt;/a&gt;
        &lt;a v-bind:href=&quot;post.coursl&quot; title=&quot;View Credential&quot; target=&quot;_blank&quot;&gt;&lt;font size=&quot;3&quot;&gt;{{ post.cours }}&lt;/font&gt;&lt;/a&gt;
        &lt;a v-bind:href=&quot;post.courl&quot; title=&quot;View Credential&quot; target=&quot;_blank&quot;&gt;&lt;font size=&quot;3&quot;&gt;{{ post.cour }}&lt;/font&gt;&lt;/a&gt;
        &lt;a v-bind:href=&quot;post.coul&quot; title=&quot;View Credential&quot; target=&quot;_blank&quot;&gt;&lt;font size=&quot;3&quot;&gt;{{ post.cou }}&lt;/font&gt;&lt;/a&gt;
        &lt;a v-bind:href=&quot;post.col&quot; title=&quot;View Credential&quot; target=&quot;_blank&quot;&gt;&lt;font size=&quot;3&quot;&gt;{{ post.co }}&lt;/font&gt;&lt;/a&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>