Dynamic input modifiers in Vue

Question

So I have an input like so:

<input type="number" :value="key" @input.number="setValue" />

I would like for the .number input modifier to be dynamic and linked to a variable, such that I can change it based on the input type (which in my instance can be either number or text).

The_ehT · Accepted Answer · 2019-11-07 05:50:12Z

2

If you want to use input modifier like that you can always create a custom component which receives type and value as props and emits value on @input -

<template>
  <div>
    <template v-if="type=='number'">
      <input :type="type" :value="key" @input.number="setValue" />
    </template>
    <template v-else>
      <input :type="type" :value="key" @input="setValue">
    </template>
  </div>
</template>

edited Nov 7, 2019 at 5:50

answered Nov 7, 2019 at 5:28

The_ehT

1,23017 silver badges37 bronze badges

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

Comments

Arc · Accepted Answer · 2019-11-07 05:23:02Z

2

Just have a handler that does that logic for you in the function.

@input="setValue($event.target.value)"

methods: {
     setValue (input) {
          if (typeof input === 'number') {
                              //do something
                            }
          if (typeof input === 'string') {
                              //do something
                            }
     }
}

You can use any type of check you want to, not necessarily typeof.

answered Nov 7, 2019 at 5:23

Arc

1,0867 silver badges18 bronze badges

3 Comments

Modermo Over a year ago

Yeah... this is what I ended up going with. I was just wondering if there was a more efficient way of doing it. Thanks!

Arc Over a year ago

Just a heads up, I highly recommend for better practice of using a v-model on that input instead of passing the $event.target.value if you aren't already.

Modermo Over a year ago

Yes, totally agree :)

Collectives™ on Stack Overflow

Dynamic input modifiers in Vue

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related