Как перезаписать поля ввода с проанализированным значением?

Question

Я пытаюсь ограничить набор символов, допустимый в поле ввода числового типа.Проблема в том, что я не могу найти способ «перезаписать» текст в поле ввода, чтобы удалить недопустимые символы.

Вот код, с которым я тестирую:

<template>
  <div>
    <input @input="validate" :model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      message: ""
    }),
    methods: {
      validate(input){
        // the regex is allowing only numbers and either a comma or a period
        this.message = input.target.value.match(/[0-9]*(,|\.)?[0-9]*/gm)[0]
      }
    }
  }
</script>

Всесимволы в поле ввода остаются неизменными, а переменная "message" - это проанализированная проверенная строка.Как мне получить эту строку «сообщения» в поле ввода?

Редактировать: вот код jsfiddle кода выше.

Answer 1

В vuejs есть метод, который называется watch и позволяет отслеживать изменения DOM.Также: модель не является сокращением для v-модели.

:model = v-bind:model

Вот jsfiddle для рабочего примера.https://jsfiddle.net/awk7g2un/

Просто замените мои данные вашим проанализированным значением

Answer 2

Ну, :model - это сокращение для v-bind:model, которое не следует путать с v-model для директивы Vue (мы хотим эту).Сделайте так:

<input @input="validate" v-model="message" placeholder="edit me">

Однако я бы предложил для этой цели использовать компонент Vue-Masked-Input или vue-inputmask (мое личное предпочтение),поскольку они помогают с вводом, обеспечивая предопределенный формат .Это может быть полезно для дат, чисел, телефонных номеров и т. Д.