[Vuejs]-Vue.js bidirectional calculation on input value

by

0👍

I recomend you use a filter but not in de same input maybe you can put the result on inches after than input.

<input v-model="number">
<label>{{ number | inches }}</label>

Regards!

0👍

It’s finally working.

Vue.component('v-unit-input', {
    template:
    '<v-text-field ref="textfield" :label="label" suffix="mm" :value="to_mm" @input="toInch($event)" v-bind="$attrs" "></v-text-field>',
    props: {
        value: Number,
        label: String,
    },
    computed: {
        to_mm(){
            const mm = Math.round(this.value * 25.4);
            return mm
        },
    },

    methods: {
        toInch: function (val) {
            if (val !== '-') {
                const result = val / 25.4;
                this.$emit('input', result)
            }
        }
    }
})

Leave a comment