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

Answer 1

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>