Vuejs 2 : How to make data lowercase

Question

I trying to make some data to lowercase (alway lowercase)

I making and search input like :

<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 dont want input showing lowercase when typing

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

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

And I dont want to add .toLowerCase() on search list v-show like :

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

Any trick?, I searched and many tell just use filter but not exits on Vuejs 2

Playground : https://jsfiddle.net/zufo5mhq/ (Try to type H)

PS: Good / better code I would like to know also, Thanks

score 26 · Accepted Answer · answered Apr 26 '17 at 07:25

26

In Vue.js 2.0, computed properties can be used to replace filters:

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

And now you can simply use searchInLowerCase in your template:

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

answered Apr 26 '17 at 07:25

CodinCat

15,530
5
49
60

Ahaaa! Thanks so much – l2aelba Apr 26 '17 at 07:27
1

Just a small enhancement for the trim(). You can put it directly to the template as: v-model.trim="modelName" – menepet Oct 09 '19 at 12:33

score 16 · Answer 2 · answered Feb 19 '18 at 10:20

16

You could even do this

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

answered Feb 19 '18 at 10:20

Mir Adnan

844
11
24

Lucas · Answer 3 · 2020-07-21T10:12:16.307

1

Ideally, you should put all the logic in a computed, so you clearly separate the logic from the view/template:

computed: {
  showHello() {
    const trimmedSearch = this.search.toLowerCase().trim()
    return 'hello'.includes(trimmedSearch) && this.search !== ''
  }
}

Then in your template:

<li v-show="showHello">Hello</li>

edited Jul 21 '20 at 10:12

answered Jul 21 '20 at 10:00

Lucas

1,833
1
18
19

score 0 · Answer 4 · answered May 12 '23 at 03:55

For me the best way to integrate lowercase is to use vue filters: https://v2.vuejs.org/v2/guide/filters.html

<template>
  <div>
    {{ name | lowercase}}
  </div>
</template>

<script>
  export default {
    data: () => ({
      name: 'I AM ROOT'
    })
    filters: {
      lowercase: function (value) {
        if (!value) return ''
        return (value.toString().toLowerCase())
      }
    }

  }
</script>

Vuejs 2 : How to make data lowercase

4 Answers4

Linked