JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  The value of foo is {{ foo }}.
  <br>
  <number :min="0" :max="100" v-model="foo"></number>
</main>

CSS

input {
  width: 5rem;
}

JavaScript

Vue.component('number', {
	template: `<input type="number" :value="value" @input="set" :min="min" :max="max" :step="step" />`,
    props: {
        value: {type: Number},
        min: {type: Number},
        max: {type: Number},
        step: {type: Number, default: 1},
    },

    methods: {
        set() {
        		let data = this.$el && this.$el.value;
            if (this.max !== undefined && data > this.max) {
                this.$emit('input', Number(this.max));

            } else if (this.min !== undefined && data < this.min) {
                this.$emit('input', Number(this.min));

            } else {
                this.$emit('input', Number(data));
            }
        }
    },

    watch: {
        value() {
            console.log('triggered', arguments);
        },
    },
})

new Vue({
	el: 'main',
  data: () => ({
  	foo: 5,
  })
})