vuejsを使用した入力フィールドのライブ検証

Question

私はライブ検証されたい入力フィールドがあります。唯一の1つのフィールドとして、私はvueフォームバリデーションのためにライブラリ全体を使用することを避けたいと考えています。

は私が達成したい三つのことがあります：最初の名前、スペースと最後の名がある場合

1. 入力フィールドが有効です。たとえばa cが有効ですが、aは有効ではありません。 a b cは有効ですが。 .alertが表示されるはずの入力フィールドは、ユーザが（ボタンをクリックするか、Enterキーを押して）、無効な文字列を送信しようとした場合の検証
2. に応じて、validまたはinvalidを使用する必要があります#wrapper、内にラップされ
3. 。

私はVUEのスクリプトを記述することを試みた：

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

悲しいことに、このスクリプトは、常に入力フィールドが空の場合でも、「有効」を返します。

私はいくつかの理由でvue.jsを使用していますので、これを私のvueアプリケーションの中に実装することは良い考えです。しかし、私はjQueryを使用することもできます。それが簡単にHTMLマークアップとコードでI have created a JS Binを理解できるようにするため

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

：私は次のスクリプトで私のリストの第三の必要性を解決することを試みました。

Answer 1

あなたはvuejsのドキュメントを参照してください、あなたは本当にフレームワークが何であるか把握していないようです。

計算された変数は、インスタンスのデータが更新されるときにのみ再計算されます。ここでは何にも反応する方法がないため、inputClassは決して再び計算されません。

入力をインスタンスにバインドするためにyour exampleを変更しました。

私はデータの適法性およびh-modelとして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">