Vue.js использование фильтров в input

#javascript #html #input #vuejs

Читаю https://ru.vuejs.org/v2/guide/syntax.html#Фильтры

И не как не могу понять, как их использовать.

Есть: 




v-model="fam" нужен уже непосредственно для того, чтобы передать значение в vue... 

А как сделать маску ввода для input, например, чтобы удалялись все русские буквы,
ну или любую другую непосредственно при вводе.

Покажите простой пример пожалуйста.
    

Ответы

Ответ 1

Фильтр ввода удобнее сделать через универсальную директиву с regex на входе:





Vue.directive("filter", {
  bind: function(el, binding) {
    this.inputHandler = function(e) {
      var ch = String.fromCharCode(e.which);
      var re = new RegExp(binding.value);
      if (!ch.match(re)) {
        e.preventDefault();
      }
    };
    el.addEventListener("keypress", this.inputHandler);
  },
  unbind: function(el) {
    el.removeEventListener("keypress", this.inputHandler);
  },
  inputHandler: null
});

new Vue({
  el: "#app",
  data: {
    message: "Ivan"
  }
})



  



Ответ 2

Судя по вашему запросу, тут нужны не фильтры, а методы. Простой пример с разрешением
ввода только латинских букв будет таким:



let app = new Vue({
  el: '#root',
  data: {
    fam: ''
  },
  methods: {
    noNumber: function(evt) {
      var regex = new RegExp("^[a-zA-Z ]+$");
      var key = String.fromCharCode(!evt.charCode ? evt.which : evt.charCode);
      if (!regex.test(key)) {
        event.preventDefault();
        return false;
      }
    }
  }
});