vue.jsでhasClassを使用

Question

私はこの設定が理想的ではないことを知っていますが、入力要素のクラスをチェックする必要があります。私は新しいプロジェクトでVue.jsを使用し始めましたが、jQueryを使用するフォーム検証ライブラリがあります。

私が使用している検証ライブラリは、検証要件に適合しないクラスを入力に追加します。

jQueryを使用していた場合、hasClassを使用して入力要素に特定のクラスがあるかどうかを確認できます。

Vueでは、要素にクラスがあるかどうかを確認する方法がわかりません。あなたは、私が入力フィールドがis-validのクラスを持っているかどうかをチェックしたいのですが見ることができるように

 methods: { 
     nextStep: function() { 
      const element = this.$el.querySelector("#conversation__tram-1 input"); 
      if (element has the class of is-valid) { 
      Do something 
      } 

     }, 
     }, 

：ここ

は私が達成したいものの例示的な方法です。私がVue.jsでこれを行うことができる方法を考えることができますか？ありがとう。

Answer 1

あなたは、要素のclassList property使用することができます。

if (element.classList.contains('is-valid')) { 
    // Do something 
} 

Answer 2

ネイティブvue.js機能のほとんどは、DOM、ないDOM自体の背後にあるデータを操作することを伴います。

これを実現する方法は複数あります。
双方向のVueクラスバインディングを使用できます。だから一度バインディングを初期化したら、それを公開するためのAPIを構築することができます。

これを試しましたか？

if (this.$els.elementNameHere.className.match(/\bmyclass\b/)) { 
    // 
} 

Answer 3

すでにjQueryが使用されている場合は、既にhasClassの方法を知っているようにしてください。

nextStep: function() { 
     const element = this.$el.querySelector("#conversation__tram-1 input"); 
     if ($(element).hasClass('is-valid')) { 
     Do something 
     } 
    }, 

Vueでは、DOMを操作することは通常想定されていないため、特別なDOM操作ルーチンはありません。刻まれた例外はいくつかありますが、これは実際のものではありません。 :) jQueryとVueを混在させる鍵は、separate what jQuery controls from what Vue controlsに注意する必要があるので、お互いの足を踏み外さないようにすることです。 Vueがそれを更新することを期待していない限り、単にDOMを読み込むだけで、それほど大きな害はありません。