Vue.js: uppercase doesn't work

Question

i have this code:

data: {
    cols: ['nome', 'data', 'size', 'ext'],
    items: []
},

I would need to turn the text into uppercase. I tried this way, following the examples of the official site:

<th v-for="col in cols">
  {{col | uppercase}}
</th>

However, the text remains in lowercase. do you know why??

https://stackoverflow.com/questions/41713941/filter-with-vuejs, if you're using VueJS 2 uppercase has been removed. You will have to use toUpperCase(), like so : `
{{col.toUpperCase()}}
`. — Horai Nuri, Jun 12 '17 at 07:29

score 37 · Answer 1 · answered Jun 12 '17 at 10:55

37

There's an alternative and simpler way to do this. Instead of using @wostex's approach for filters, you can use Javascript directly inside double bracket notation.

new Vue({
  el: '#app',
  data: {
    cols: ['nome', 'data', 'size', 'ext']
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <th v-for="col in cols">
        {{ col.toUpperCase() }}
      </th>
    </thead>
  </table>
</div>

answered Jun 12 '17 at 10:55

Kaung Myat Lwin

1,049
1
9
23

This works, but am only looking for the first letter being uppercase – Sweet Chilly Philly Apr 16 '19 at 00:17
4

@SweetChillyPhilly `word.charAt(0).toUpperCase() + word.substr(1)`. Uppercases the first letter then appends the string minus the first character. – Dan Apr 23 '19 at 15:01
this is better to do it like this instead of the vue filter way. the reason for that is becuase the syntax of filter | soon enough gonna to be javascript itself https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator its called the pipe line synatx. and actually its work kind of diffrent way than its work in vue. and soon enough you will began to be confuse with this. is it vue or pipe js. – eli chen Jun 21 '19 at 14:27
2

@SweetChillyPhilly Another alternative method is to use CSS `text-transform: captitalize`. – Kaung Myat Lwin Jun 23 '19 at 04:31

Egor Stambakio · Answer 2 · 2017-07-05T20:23:58.100

There are no built-in filters in Vue.js sinse 2.x, so you need to define a filter manually:

new Vue({
  el: '#app',
  data: {
    cols: ['nome', 'data', 'size', 'ext']
  },
  filters: {
    uppercase: function(v) {
      return v.toUpperCase();
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <th v-for="col in cols">
        {{col | uppercase}}
      </th>
    </thead>
  </table>
</div>

Reeye · Answer 3 · 2020-05-06T06:21:42.967

There are two ways to add filter:

when new Vue

new Vue({
    el: '#app',
    data: {},
    methods: {},
    filters: {
        uppercase: function (value) {
            if (!value) return ''
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
})

before new Vue (Global)

Vue.filter('uppercase', function (value) {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
})

score 1 · Answer 4 · answered May 06 '20 at 03:32

1

you only have to do the next:

`<th v-for="col in cols">
    {{col = col.toUpperCase()}}
 </th>`

answered May 06 '20 at 03:32

Miguel Coy

11
1

score 0 · Answer 5 · answered Jun 21 '19 at 11:51

I know you asked for VueJS / Javascript implementation, but I wanted to share what I did from my end as well. I highly recommend just use CSS on this part to save some processing. Yes, I know the uppercase first word implementation in Vue speed is only less significant, but if you prefer saving brain power, then CSS text-transform: capitalize would do just fine since its only UI that you are concerned of, right? Here's some reference https://www.w3schools.com/cssref/pr_text_text-transform.asp

Vue.js: uppercase doesn't work

5 Answers5

Linked