1

Сделал фильтр для фильтрации ввода чисел, но чего-то не хватает. Подскажите, почему не работает фильтр в поле input.

На странице он нормально работает:

<form action="" id="calc">
<input type="text" v-model="test" style="text-align: right">
<p>Model value : {{ test | numFilter }}</p>
</form>

    Vue.filter('numFilter', function (value) {
            return value.replace(/[^\d.]*/g, '')
                .replace(/([.])[.]+/g, '$1')
                .replace(/^[^\d]*(\d+([.]\d{0,5})?).*$/g, '$1');
})

var app = new Vue({
  el: '#calc',
  data: {
     test: ''
  }
});

Ссылка на codepen

Когда пытаюсь применить его к полю input, даже поле не выводиться:

<form action="" id="calc">
<input type="text" v-model="test | numFilter" style="text-align: right">
</form>

Ссылка на codepen

2

1 ответ 1

2

Директива v-model предназначена для двусторонней связки элемента с переменной - вводите текст в поле и директива присваивает результат в переменную test. А вы указали "test | numFilter" выражение вместо имени переменной, это не работает. Регулярное выражение вам не поможет, вам нужно создать свою пользовательскую директиву, которую нужно повесить на input для обрабатывания ввода.

Пример посмотрите здесь

Пример не является решением, только описывает способ.

Или же можно использовать уже готовый компонент: https://www.npmjs.com/package/vue-input-number

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.