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?

You can't capitalize object, at least not with the filter function you wrote.In fact it accept string being passed.Your filter shall be used here {{item.first | capitalize}},{{item.last | capitalize}} — Belmin Bedak
– Belmin Bedak, Commented Apr 6, 2018 at 9:51
can you help to change this code, because I'm beginer it is a bit difficult for me — Павел Шиляев
– Павел Шиляев, Commented Apr 6, 2018 at 9:53

kailniris · Accepted Answer · 2018-04-06 09:53:26Z

1

Use filters in the template syntax.

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

answered Apr 6, 2018 at 9:53

kailniris

9,5762 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shreekanth · Accepted Answer · 2022-01-15 09:01:54Z

0

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.

answered Jan 15, 2022 at 9:01

Shreekanth

8591 gold badge10 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to use filters in Vue js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related