How to use filters in Vue js?

Question

I need to use filter "capitalize" in vue js 2, but when I add filters according to documentation, it gave me error.

my code

        <template>
        <div class="test">
            <h1>{{title}}</h1>
            <ul>
                <li v-for="item in items | capitalize" :key="item.first">{{item.first}},{{item.last}}</li>
            </ul>
        </div>
        </template>


        <script>
        export default {
        name: 'test',
        vinput: '',
        data () {
            return {
            title: 'Hello,
            items: [
                {
                first: 'John0',
                last: 'Doe'
                },
                {
                first: 'Pavel',
                last: 'Doe'
                },
                {
                first: 'Shox',
                last: 'Doe'
                }
            ]
            }
        },
        filters: {
            capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
        }
        </script>

error

enter image description here

Any ideas, how to corrext that error?

Answer 1

First, we have to define in main.js as shown below.

Vue.filter('UpperCase', function(val) {
  return val.toUpperCase()
})

Then, we have to use where we need as shown below.

<div>{{ name | UpperCase }}</div>

Whatever function you want, just write function and call it.

Answer 2

Use filters in the template syntax.

<li v-for="item in items" :key="item.first">{{item.first | capitalize}},{{item.last | capitalize}}</li>