Vueに「まだ対話していない」と言う一般的な方法はありますか？

Question

提出前に確認したい内容の入力があります。状態（正しいか間違って入力）に応じて、私は、ユーザーにフィードバックするクラスを設定します。

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    input: "" 
 
    }, 
 
    methods: { 
 
    getClass() { 
 
     if (this.input == "") { 
 
     return "ko"; 
 
     } else { 
 
     return "ok"; 
 
     } 
 
    } 
 
    } 
 
});

.ok { 
 
    border-width: 3px; 
 
    border-color: green; 
 
} 
 

 
.ko { 
 
    border-width: 5px; 
 
    border-color: red; 
 
} 
 

 
.initial { 
 
    border-width: 1px; 
 
    border-color: gray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    <input v-bind:class="getClass(input)" v-model="input"> 
 
</div>

それは私が中立的なスタイリング前にがしたいことを除いて、正常に動作します与えられたフィールドの操作（上記の例では<input>）、その場合にはクラスinitialが適用されます。

これはVueで簡単なものですか？私はそれぞれのclickedイベントを聞いて、それに基づいてクラスを設定することを想像することができます（最初はinitial、次に内容に応じて正しいもの）。しかしこれはやや面倒です。
つまり、その要素との最初のやりとりまでユーザーに指示はありません。

これを達成する自然な方法はありますか？

Answer 1

一つの可能​​な解決策は、isInteractedがtrue でない限り、何のクラスを設定しないでください"isInteracted": false

Watchinput

dataに追加し、 input

の任意の変化にtrueへisInteractedを設定

1. にあります

   ユーザが実際に入力するだけが最初にタッチされたか否かを保持しているかいない

   new Vue({ 
       el: "#app", 
       data: { 
       input: "", 
       touched: false 
       }, 
       methods: { 
       getClass() { 
        if(!this.touched){ 
         return 'initial'; 
        }else{ 
         if(this.input == "") { 
          return "ko"; 
         } else { 
          return "ok"; 
         } 
        } 
   
       } 
       } 
   }); 
   

   ブール値であるデータの特性に余分なプロパティtouchedを追加し、何か

Answer 2

を書いていない限り、この方法で、あなたの強調表示ロジックがトリガされません入力変化

<input v-bind:class="getClass(input)" @change="this.touched = true" v-model="input"> 

Answer 3

にtrueにtouchedの値を設定し、私は.once修飾子はこの目的のためだけにあると思います。だから、私はこれが最も宣言型ソリューションであると思う：

new Vue({ 
    el: "#app", 
    data: { 
    input: "", 
    isTouched: false 
    }, 
    methods: { 
    getClass() { 
     return this.isTouched ? "ko" : "ok" 
    } 
    } 
}); 

<div id="app"> 
    <input 
    :class="getClass(input)" 
    v-model="input" 
    @input.once="isTouched = true" 
    > 
</div>