CODEWITHSUNDEEP
vuejs2
Tony
Tony

Reputation: 17647

VueJS two way filter

Is it possible to use a two way filter in VueJS?

I tried, but could not find it on the new docs.

I tried

<script>
    var app = new Vue({
        el: '#app',
        data: {
            EditMode: false,
            message: 'Hello Vue!'
        },
        filters: {
            capitalize: function (value) {
                if (!value) return '';
                value = value.toString();
                return value.toUpperCase();
            },
            ccc:
                {
                    read: function (value) {
                        return value.toUpperCase() + "re";
                    },
                    write: function (value) {
                        return value.toLowerCase() + "wri";
                    }
                }
        }
    }
    );
</script>

and

<h1>{{ message | ccc }}</h1>

but it is not working.

for example if I test the simple filter 

<h1>{{ message | capitalize }}</h1>

it Works.

Upvotes: 1

Views: 5028

Answers (2)

acdcjunior
acdcjunior

Reputation: 135772

Two-Way filters have been replaced in Vue.js 2 (bold is mine):

Some users have enjoyed using two-way filters with v-model to create interesting inputs with very little code. While seemingly simple however, two-way filters can also hide a great deal of complexity - and even encourage poor UX by delaying state updates. Instead, components wrapping an input are recommended as a more explicit and feature-rich way of creating custom inputs.

For a step-by-step guide to the new best practice, follow the Two-Way filters migration guide.

Upvotes: 5

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You cannot use object method and utilize getter and setter in filter (what you're trying with read (getter) and write (setter) in your concept). You should be using simply the function which is return the desired result.

If you want to utilize the getter and setter, then you have to use computed option where you need to use get and set methods not read and write.

Upvotes: 0

Related Questions