VueJS two way filter

Question

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.

I don't think filters would work like this. I could tell you to use computed props but you probably know it yourself. What I am genuinely interested in is what are these `read` & `write` props you have for `ccc` filter? — oniondomes, Feb 14 '18 at 18:57
the read and write were the attempt to write a Two Way Filter in VueJS. — Tony, Feb 14 '18 at 19:12

score 5 · Answer 1 · edited Jul 15 '22 at 21:06

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.

score 0 · Answer 2 · answered Feb 14 '18 at 19:09

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.

VueJS two way filter

2 Answers2

Linked