VueJSとJQueryのクラスを変更する

Question

私はイベントを受け取り、いくつかのクラスをフォーム要素（フォーカス、ぼかし、奇数/偶数など）に追加するいくつかのカスタムJQueryコードを用意しています。何も大きくはありませんが、私はすべてのウェブサイトがJQueryと1ページだけが複雑なフォームにVueJSを使用するため、VueJSでこのロジックをすべて書き直したくないです。

新しいVueJS要素でJQueryコードを起動する命令が書かれています。しかし、一部のVueJSコード（私の場合はvee-validateディレクティブプラグインですが、どのVueJSコードでもかまいません）はv-bind:classを使用してクラスを変更します。それはJQueryでクラスセットを消去するので、クラスを置き換えるクラスを追加しません... VueJSとJQuery/Javascriptのクラスでうまくいく方法はありますか？ JQueryに既存のクラスなどを認識させる。

おかげ

Answer 1

あなたはMutationObserverhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

でこれを達成することができます次の例では、VUEを経由して、クラスのリストを変更オフにし、背面にあるから変更クラスをクリックしたことをvuejsアプリを設定します。その後、クラス属性に変更があるかどうかを調べるために変異オブザーバを設定し、さらにいくつかのjqueryを実行して、makeBoldクラスがクラスリストにあるかどうかをチェックし、追加しない場合はチェックします。

これはVUEは、要素クラスリストを制御していることを実証している観察者は、私はそのVUEがmakeBoldクラス

を削除して表示するoberserver反応を無効にするチェックボックスを追加した

さらにいくつかのjQueryを実行することにより、変化に反応しています

const app = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     on: true 
 
    } 
 
    } 
 
}) 
 
const node = document.getElementById('app') 
 
// add bold class with jQuery 
 
$('#app').addClass('makeBold') 
 

 
const observer = new MutationObserver(mutations => { 
 
    if ($('#cbx').prop('checked')) return 
 
    const changes = mutations 
 
    .filter(({ attributeName }) => attributeName === 'class'); 
 
    if (changes.length && !$('#app').hasClass('makeBold')) { 
 
    $('#app').addClass('makeBold') 
 
    } 
 
}) 
 

 
observer.observe(node, { attributes: true })

.on { 
 
    background-color: orange; 
 
} 
 

 
.off { 
 
    background-color: white; 
 
} 
 
.makeBold { 
 
    font-weight: 600; 
 
} 
 
.appBody { 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on"> 
 
    Click Me 
 
</div> 
 
<input type="checkbox" id="cbx"> Disable Observer reaction