CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-filter
user7734645
user7734645

Reputation:

How to use computed function to filter?

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

Upvotes: 1

Views: 1593

Answers (2)

Doeke Norg
Doeke Norg

Reputation: 56

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

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

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>

Upvotes: 1

Related Questions