Vuejs 2: how to make string data

Question

I am trying to make some data lowercase (always lowercase)

I create and search as:

<template id="search">
    <div>
        <input type="text" v-model="search">
        <li v-show="'hello'.includes(search) && search !== ''">Hello</li>
    </div>
</template>

Vuejs: (component)

Vue.component('search', {
    template : '#search',
    data: function(){return{
        search : '',
    }}
});

---

I tried watch, but I do not need to enter lowercase letters as I type

watch: {
    'search' : function(v) {
        this.search = v.toLowerCase().trim();
    }
}

Demo: https://jsfiddle.net/rgr2vnjp/

---

And I do not want to add .toLowerCase()to the search list v-showas:

<li v-show="'hello'.includes(search.toLowerCase()) && search !== ''">Hello</li>

---

Any trick? I searched, and many say that just use filter, but do not go out to Vuejs 2

Playground: https://jsfiddle.net/zufo5mhq/ (try entering H )

PS: Good / best code I'd like to know, thanks

Answer 1

Vue.js 2.0 :

computed: {
  searchInLowerCase() {
    return this.search.toLowerCase().trim();
  }
}

searchInLowerCase :

<li v-show="'hello'.includes(searchInLowerCase) && search !== ''">Hello</li>

Answer 2

{{tag.title.toLowerCase().trim()}}