Как запретить ввод значения Vue?

Question

У меня есть следующий код Vue:

<code>// HTML
<div id="app">
  Value: <pre>{{ value }}

// JS новое Vue ({ el: "#app", данные: { значение: '', }, методы: { SetValue (событие) { / * Удалить нечисловые значения * / this.value = event.target.value.replace (/ [^ \ d] / g, ''); } } });

У меня это настроено на JSFiddle здесь: http://jsfiddle.net/eywraw8t/353729/.

Почему ввод позволяет мне вводить нечисловые значения?

Если вы запустите приведенный выше код и введете нечисловую тарабарщину в элемент ввода (например, asdasfa), вы увидите, что элемент ввода будет содержать введенный вами текст (asdasfa), но элемент выше вход будет пустым!

Я хотел бы ограничить пользователей только разрешением вводить числа на входе. Я хотел бы сделать это, используя только Vue, никакие сторонние библиотеки или type="number".

Answer 1

Проблема в том, что Vue не видит изменения в свойстве данных value, потому что, когда вы отфильтровываете не числа, вы по существу присваиваете ему то же строковое значение.Поскольку строки неизменяемы и идентичны, когда их содержимое одинаково, это не вызывает реактивность Vue.

Простое решение - вручную установить значение <input> на новое значение только для номера.

this.value = event.target.value = event.target.value.replace(/\D/g, '')

http://jsfiddle.net/9o2tu3b0/

Answer 2

, поскольку значение из this.value не изменяется (всегда = ''), поэтому не будет вызывать повторную визуализацию.

Решение :

Вы можете использовать this.$forceUpdate() для принудительного повторного рендеринга.

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

new Vue({
  el: "#app",
  data: {
    value: '',
    errorDescription: ''
  },
  methods: {
  	setValue(event){
      /* Remove non-numeric values */
    	this.value = event.target.value.replace(/[^\d]/g, '')
      this.errorDescription = 'Only Number allow'
      this.$forceUpdate()
    }
  }
})

.error {
  background-color:red;
}

  Value: {{ value }}

{{errorDescription}}