CODEWITHSUNDEEP
javascriptvue.jsuppercase
matteo
matteo

Reputation: 2401

Vue.js: uppercase doesn't work

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??

Upvotes: 11

Views: 47587

Answers (5)

Reeye
Reeye

Reputation: 91

There are two ways to add filter:

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

Upvotes: 2

Miguel Coy
Miguel Coy

Reputation: 11

you only have to do the next:

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

Upvotes: 1

Jovanni G
Jovanni G

Reputation: 331

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

Upvotes: 0

Egor Stambakio
Egor Stambakio

Reputation: 18146

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>

Upvotes: 15

Kaung Myat Lwin
Kaung Myat Lwin

Reputation: 1109

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>

Upvotes: 39

Related Questions