Tested with Firefox Nightly and Firefox DevEdition (Beta)

I can enter ....------....---- and the control accepts it as a valid entry.

  <vue-numeric-input
    ref="input"
    :value="value"
    :min="min"
    :max="max"
    :step="step"
    :width="width"
    :precision="precision"
    :disabled="disabled"
    @mouseleave="stopEvent"
    @input="onInput"
    controlsType="updown"
  ></vue-numeric-input>

Does not work as above

Small thing I noticed when using - right clicking on either the up or down arrow makes the value increment or decrement forever.

I'm using Chrome - I've also confirmed I see this behavior in the live demo.

When you press up/down or +/- for a longer period it starts to "speed scroll" which is nice. But after you release it I was expecting a @change event to be triggered, but that does not seem to happen. At least not for me. I have to press a button again to get the event.

Is there any way to prevent min\max validation after the key event, and wait until blur?

Let's say I set the minimum to 700 and the maximum to 800. The user cannot enter values using the keyboard. Because when she hits a digit, the value will be set to 800. And if she erases the digit, the value will be set to 700.
How for example she would enter 750?

I use bootstrap and it's nice to be able to apply form-control class to each input. Is there a way to set the class on the input itself (not the vue-numeric-input wrapper) ?

Hi!

I am facing issue with entering zero after dot(.).

For example:
I have added numeric input as following to my component:

<vue-numeric-input class="form-control" v-model="data.amount" :controls="false" :precision="2"></vue-numeric-input>

But when I try to enter 300.01 it is not allowing to input zero after dot(.). Instead dot(.) is cleared when I input zero.

Thanks!

The .native modifier for v-on is only valid on components but it was used on .
found in
--->

why this error happens for default?

From a quick look at package.json, it seems this only supports Vue 2. I'd like to have a version that's usable in Vue 3.

You assumed that decimal points are always with dot. What about comma?

When i zoom less than 100%, for exmaple 90% the Plus(+) and Minus(-) icons disapear.

I was able to get back the minus icon atleast with below css. But not the plus
.vue-numeric-input .btn-decrement .btn-icon::before { -webkit-transform: translate(-50%,50%) !important; transform: translate(-50%,50%) !important; } .vue-numeric-input .btn-increment .btn-icon::before { -webkit-transform: translate(-50%,50%) !important; transform: translate(-50%,50%) !important; }

If the vue-numeric-input component appears within form tags, then it will attempt to submit the form every time the updown button is clicked.

The standalone Test component below demonstrates the issue.

Workaround: replace the form tag with a div tag (which may cause CSS selectors to not fire if they rely on form).

Version: 1.0.3
Browsers: Chrome, Edge, Firefox, Safari mobile

<template>
  <div class="container">
      <form v-on:submit.prevent="submit">
        <div class="field">
            <label class="label">Personal best for 200m</label>
            <div class="control">
              <div class="columns">
                <div class="column is-2">
                  <label class="label is-size-6 has-text-right has-text-weight-light">Minutes:</label>
                </div>
                <div class="column is-3">
                  <vue-numeric-input 
                    v-model="form.pb200mMinutes"
                    :align="'center'" 
                    :controlsType="'updown'" 
                    :min="0" :max="20" :step="1"
                    @change="change">
                  </vue-numeric-input>
                </div>
                <div class="column is-2">
                  <label class="label is-size-6 has-text-right has-text-weight-light">Seconds:</label></div>
                <div class="column is-3">
                  <vue-numeric-input 
                    v-model="form.pb200mSeconds"
                    :align="'center'" 
                    :controlsType="'updown'" 
                    :min="0" :max="59" :step="1">
                  </vue-numeric-input>  
                </div>
              </div>
            </div>
            <p class="help">Your personal best time for 200m in minutes and seconds</p>
        </div>
      </form>
  </div>
</template>

<script>
import Vue from 'vue';

import VueNumericInput from 'vue-numeric-input';
Vue.use(VueNumericInput)

export default {
  name: 'Test',
  data() {
    return {form:{
            pb200mMinutes: 0,
            pb200mSeconds: 0
            }
    }
  },
  methods: {
      submit(){
          console.log('submit');
      },
      change(){
          console.log('changed');
      }
    
  },
  created() {
   
  },
    components: {
        VueNumericInput: VueNumericInput
    },
};
</script>

P.S. Thank you for the cool module!

Example:
I have a shopping cart form with items that user added. And each of items has own numeric input with name "item[item_id]". When I bind onChange event it returns only his value.
So, how to get his name or how to pass additional params to @change="onMyFunc(..., ...)"?

onMyFunc(id, value) {
    ...
}