[Vuejs]-Vue JS Filter for Title Case

by

8👍

✅

filters: {
    titleize(value){
        return value.replace(/(?:^|\s|-)\S/g, x => x.toUpperCase());
    }
}
👤Maximoff

4👍

Filters/ Mappers, can be simple JS methods who receives some param, apply operation on it and returns a value.

I believe you really don’t need a JS method for this,

Try to apply the text-transform CSS style to HTML.

eg: ( text-transform: capitalize );

h1 { text-transform: capitalize; }
<h1>hello world </h1>

Use JS approach when absolutely necessary.

👤Satyam Pathak

1👍

If the value is in uppercase, you can use it this way:

Vue.filter("TitleCase", value => {
  return value.toLowerCase().replace(/(?:^|\s|-)\S/g, x => x.toUpperCase());
});
👤Thyago Dias

0👍

Thanks @skirtle. I used the below code.

    filters:{
     upper(str){
       str = str.toLowerCase().split(' ');

       let final = [ ];

        for(let  word of str){
          final.push(word.charAt(0).toUpperCase()+ word.slice(1));
        }

      return final.join(' ')      
        }
      }

This worked like a charm. 🙂

👤MKBrar

Leave a comment