title: Vuejs 2 : How to make data lowercase
body: <p>I trying to make some data to lowercase <em>(alway lowercase)</em></p>
  
  <p>I making and search input like :</p>
  
  <pre><code>&lt;template id="search"&gt;
      &lt;div&gt;
          &lt;input type="text" v-model="search"&gt;
          &lt;li v-show="'hello'.includes(search) &amp;&amp; search !== ''"&gt;Hello&lt;/li&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Vuejs :</strong> (component)</p>
  
  <pre><code>Vue.component('search', {
      template : '#search',
      data: function(){return{
          search : '',
      }}
  });
  </code></pre>
  
  <hr>
  
  <p>I tried <code>watch</code>, But I dont want input showing lowercase when typing</p>
  
  <pre><code>watch: {
      'search' : function(v) {
          this.search = v.toLowerCase().trim();
      }
  }
  </code></pre>
  
  <p><strong>Demo :</strong> <a href="https://jsfiddle.net/rgr2vnjp/" rel="noreferrer">https://jsfiddle.net/rgr2vnjp/</a></p>
  
  <hr>
  
  <p>And I dont want to add <code>.toLowerCase()</code> on search list <code>v-show</code> like :</p>
  
  <pre><code>&lt;li v-show="'hello'.includes(search.toLowerCase()) &amp;&amp; search !== ''"&gt;Hello&lt;/li&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Any trick?</strong>, I searched and many tell just use <code>filter</code> but not exits on Vuejs 2</p>
  
  <p><strong>Playground :</strong> <a href="https://jsfiddle.net/zufo5mhq/" rel="noreferrer">https://jsfiddle.net/zufo5mhq/</a> (Try to type <strong>H</strong>)</p>
  
  <p><em>PS: Good / better code I would like to know also, Thanks</em></p>