Подтверждение ввода в поле ввода с использованием vuejs

Question

У меня есть поле ввода, которое я хочу проверить в реальном времени. Как единственное единственное поле, я хотел бы избежать использования целостной библиотеки для валидации формы vue.

Есть три вещи, которые я хотел бы выполнить:

1. Поле ввода является действительным, если есть первое имя, пробел и фамилия. Например, a c действительно, а a - нет. Хотя a b c действительно.
2. Поле ввода обернута внутри #wrapper, который следует использовать valid или invalid, в зависимости от проверки
3. Если пользователь пытается отправить неверную строку (нажав на кнопку или нажимая клавишу ВВОД) .alert должен показать.

Я попытался написать сценарий VUE:

computed: { 
    inputClass: function() { 
    var inputField=document.getElementById("inputField").value; 
    if (inputField==null || inputField=="") { 
     return 'invalid'; 
    } else { 
     return 'valid'; 
    } 
    } 
} 

К сожалению, этот сценарий всегда возвращает «действительный», даже если поле ввода пустым.

Поскольку я использую vue.js по ряду других причин, представляется хорошей идеей реализовать это в моем приложении vue. Но я мог бы использовать jQuery. Я пытался решить третью потребность в моем списке со следующим сценарием:

$('button').on('click', function(){ 
    if($(this).val().length === 0) { 
    $('.alert').fadeIn(); 
    } else { 
    $('.alert').hide(); 
    } 
}); 

Для того, чтобы было легче понять I have created a JS Bin с HTML разметкой и кодом.

Answer 1

Вы должны пройти документацию vuejs, похоже, вы действительно не понимаете, что такое инфраструктура.

Вычисленная переменная будет пересчитана только при обновлении данных экземпляра. Здесь нет никакого способа отреагировать на что-либо, поэтому inputClass никогда не будет вычисляться снова.

Я модифицировал your example, чтобы связать ваш ввод с экземпляром.

Я объявлял это в соответствии с приложением данных и в html как v-model.

var app = new Vue({ 
    el: '#app', 
    data: { 
    "input": "", 
    }, 
    computed: { 
    inputClass: function() { 
     var inputField=document.getElementById("inputField").value; 
     if (this.input === "") { 
     return 'invalid'; 
     } else { 
     return 'valid'; 
     } 
    } 
    } 
}); 



     <input v-model="input" type="text" placeholder="Type your full name..." id="inputField"> 

Сейчас он работает