Vue.js 如何在Vue js中使用过滤器？

我需要在VUEJS2中使用过滤器大写，但当我根据文档添加过滤器时，它给了我错误

我的代码

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

错误

---

任何想法，如何更正该错误？

在模板语法中使用过滤器

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

---

需要显示更多的代码现在可以了吗？你不能大写对象，至少你写的过滤函数不能。事实上，它接受传递的字符串。你的过滤器应该在这里使用{{item.first{capitalize}，{{item.last{124; capitalize}}}你能帮我修改这个代码吗，因为我开始它对我来说有点困难