Как сделать универсальный метод для правки input на лету?

Question

[Kripto77]

Вроде бы примитивная задача по меркам Javascript, но на Vue не получается.
Необходим универсальный метод который на лету правил бы input value по нужным правилам, например менял бы в числе запятую на точку или приводил бы к целому числу. Чтобы привязать такой метод к любому нужному input.

Проблема что не вернуть обработанное значение, только напрямую обновив указанную переменную. Но не делать же по методу на каждый input

Нерабочий вариант 1. Работает только с моделями без вложенности вариант 1

Нерабочий вариант 2. Меняет только value в input без изменения модели вариант 2

Подскажите пожалуйста как сделать правильно

Answer 1

[0xD34F]

Меняет только value в input без изменения модели

v-model слушает событие input, так что добавьте event.target.dispatchEvent(new Event('input'))

Comments

[Kripto77]

Огромное спасибо, очень помогли.
А есть решение лаконичнее?

[0xD34F]

Kripto77, если под "лаконичнее" вы подразумеваете простоту повторного использования, то сделайте компонент, который будет принимать в качестве параметра функцию, преобразующую значение. Например.

UPD. Или директиву.

[Kripto77]

0xD34F, спасибо, буду разбираться

Answer 2

[Kripto77]

Решение, может кому пригодится.
Код указан для компонента либы Vuetify, т.к. требуется @change.native (напрямую на теге input не работает)

<div id="app">
                            <v-text-field
                                v-model="myModel"
                                label="Tine:"
                                @keyup="filterToFloat($event)"
                                @change.native="setToFloat($event)"
                            >
                                <span slot="append">час</span>
                            </v-text-field>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            item: {
              subitem: 0.25
            }
        },
        methods: {
            setToFloat: (event) => {
                event.target.value = parseFloat(event.target.value)
                event.target.dispatchEvent(new Event('input'))
            },
            filterToFloat: (event) => {
                event.target.value = event.target.value.replace(',', '.').replace(new RegExp(/[^0-9.]/), '')
                event.target.dispatchEvent(new Event('input'))
            },
        },
    })
</script>