How to use computed function to filter?

Question

i have a doubt on a little project that i am developing, i don't want to use custom filters, i just want to use computed filters to output the reverse of a simple text that i defined in my data, at the moment i tried this:

<p>{{someText | reverseFiltered}}</p>
<script>
 export default {
 data(){
 return {
 someText: "Apple"
 }
 },
 computed: {
 reverseFiltered(){
 return this.someText.split("").reverse().join("");
 }
 }
 }
</script>

the output is the same as the data text, no reverse, can you guys explain me how it works, i am a little confused with the computed filter

Answer 1

You have to use directly reverseFiltered, because you use computedMethod.

<p>{{reverseFiltered}}</p>

var data = {
 message: 'Hello Vue.js!'
}
var demo = new Vue({
 el: '#demo',
 data(){
 return {
 someText: "Apple"
 }
 },
 computed: {
 reverseFiltered(){
 return this.someText.split("").reverse().join("");
 }
 }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
 <p>{{reverseFiltered}}</p>
</div>

In your code, you wrote a computed method, not a filter.

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value.

Here is an example of filter.

Vue.filter('reverse', function (value) {
 return value.split('').reverse().join('')
});
var demo = new Vue({
 el: '#demo',
 data(){
 return {
 someText: "Apple"
 }
 },
 computed: {
 reverseFiltered(){
 return this.someText.split("").reverse().join("");
 }
 }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
 <p>{{someText | reverse}}</p>
</div>

Answer 2

The computed value is a "variable" of it's own.

You can just reference it in your template as {{ reverseFiltered }}

De computed properties "watch" for changes on it's values, and updates when those values update. So you can see computed properties as "dynamic properties", they change when they have to, and update the dom accordingly.

See also this documentation: https://v2.vuejs.org/v2/guide/computed.html