How create a v-model modifier to a VueJS Component?

Question

In VueJS there is some v-model modifies that pre-parse the binded value, for instance v-model.trim that removes whitespaces from the string.

How can I create my own modifier? for instance v-model.myparse Today um using something like:

computed: {
  name: {
    get: function () { return parse(this._name);},
    set: function (value) { _name = parse(value);}
  }

What is very verbose.

I would it to be reusable to do something like:

<input v-model.myparse="name" name='n1'/>
<input v-model.myparse="name" name='n2'/>
<input v-model.myparse="name" name='n3'/>
<input v-model.myparse="name" name='n4'/>

computed properties with setters seems to do part of the work, but it is really useful with some few variables only, it becomes very verbose with a lot of properties.

tony19 · Accepted Answer · 2022-07-15 20:45:10Z

6

First, adding adding a custom modified to v-model is under discussion but not yet implemented.

If it was implemented, you could extend the v-model and add a modifier to it.

Since that is not possible, you have a couple of options left, one of which is to use :value instead of v-model. Because v-model is just a syntactic sugar of following:

  <input type="text" :value="message" @input="message = $event.target.value">

The above code is the same as:

  <input type="text" v-model="message">

So, I suggest you replace the logic for the @input to something like this:

Now, you can use a function to return a modified value as:

methods: {
  getModel ($event) {
    return $event.target.value.trim()
  } 
}

But all of what I mentioned can still be done with the v-model if you use a function.

Of course it goes without saying, you can create your own custom directive also.

edited Jul 15, 2022 at 20:45

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 31, 2018 at 18:57

samayo

16.5k13 gold badges95 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How create a v-model modifier to a VueJS Component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related