Using a prop inside a filter? - vue.js

Question

I wish to filter some text on my component:
<p :v-text="'hello' | prefix"></p>
My filter looks like:
prefix(string) {
return inputPrefix + string;
}
inputPrefix is just a prop....
<my-component input-prefix="some-prefix_" ....
But I get the error inputPrefix is not defined
How can I use a prop in a filter?

Answer 1

In filters you can not access this. Use the filter in this way,
filters:{
prefix: function(inputPrefix, string){
console.log(inputPrefix);
return inputPrefix + string;
}
and access it like:
<p :v-text="'hello' | inputPrefix"></p>
or a computed property.

Answer 2

You can read the docs or refer this for explanation.
Filters should be pure functions which gives output based upon input. In your case you can use a computed property.
Vue.component('mine', {
props: ['prefix'],
data() {
return {
value: ' component'
}
},
template: '<p>{{formattedString}}</p>',
computed: {
formattedString() {
return this.prefix + this.value
}
}
})
new Vue({
el: "#app",
components: ['mine'],
template: '<mine prefix="new" />'
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<div id="app"></div>
If you still wish to use a filter for your scenario, please find below
Vue.component('mine', {
props: ['prefix'],
data() {
return {
value: ' component'
}
},
template: '<p>{{value | format(prefix)}}</p>',
filters: {
format(value, prefix) {
return prefix + value
}
}
})
new Vue({
el: "#app",
components: ['mine'],
template: '<mine prefix="new" />'
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<div id="app"></div>