Possible mistake in filters documentation: "failed to resolve filter"


#1

Hey there,

I am learning some VueJS and came across the filters page: https://vuejs.org/v2/guide/syntax.html#Filters
When I am trying to call them like this:

{{ fruit.text || uppercase }}

it returned a Vue warn: “failed to resolve filter: uppercase”.

The filter was added by adding a filters object to the Vue object:

var vm = new Vue({
    el: '#app',
    data: {
        fruits: [
            { id: 0, text: "Apfel" },
            { id: 1, text: "Banane" },
            { id: 2, text: "Birne" },
        ]
    },
    filters: {
        uppercase: function(value) {
            return value.toUpperCase() || "";
        }
    }
})

So, according to the documentation it should work. My guess it, that this used to work in VueJS 1, but not in the newer version. It works when I register a filter via Vue.filter(“uppercase”, function() …)

Regards
Ctwx

PS: my actual code: https://codepen.io/Ctwx/pen/xLZQxw


#2

The documentation is correct.
{{fruit.text | uppercase}} Note: you should use one | not two || when you want to apply a filter


#3

Sorry, that is a typo in my original post. Look at the code I have: https://pastebin.com/SPVy9ygT at line 11.
I get a “failed to resolve filter” warning.


#4

The filters should be defined on the custom element not the parent. Check https://jsfiddle.net/sadick254/oq0mqfv5/


#5

Oh, ok. That’s not very apparent through the example

new Vue({
	// ...
	filters: {
		capitalize: function (value) {
		if (!value) return ''
		value = value.toString()
		return value.charAt(0).toUpperCase() + value.slice(1)
		}
	}
})

from https://vuejs.org/v2/guide/syntax.html#Filters

Then I take back my assumption that there’s a mistake in the documentation.

Thank you for pointing out my mistake.

Best regards
Ctwx


#6

I also got totally confused by this, thinking you could define filters on the root Vue instance.


#7

I submitted a PR to improve the filter doc: