VueJSとjQueryをうまく連携させる 質問する

VueJSとjQueryをうまく連携させる 質問する

この質問は関連/類似していますintl-tel-input と vuejs2 を一緒に使用する、まだ答えが出ていません。

そしてVueJS データ属性値として prop を使用する解決策はありますが、「環境」について少し説明します。

つまり、簡単に言うと、新しいブートストラップ タブ (タイトルと URL) を動的に設定し、 を使用していくつかの機能を (再) バインドしようとしていますjQuery

次の行を追加するhttps://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258私の Vue メソッドでは、変更を 2 回トリガーした場合にのみ機能が適用されます。

最初の(未回答の)質問でも同じ問題です。

vueJSとの間でどのように機能するかを少し説明してもらえますかjQuery? また、jQuery パッケージを書き直すことなく、問題を解決する方法を教えてください。

console.logの変数は 1 段階遅れているように見えます。

レ:

関連する言及された問題のためのペンを用意しました:https://codepen.io/AngelinCalu/pen/LWvwNq

ベストアンサー1

Vue を他の DOM 操作ツールキットとうまく連携させるには、それらを完全に分離する必要があります。つまり、jQuery を使用して DOM ウィジェットを操作する場合は、Vue も使用しないでください (その逆も同様です)。

ラッパーコンポーネントブリッジとして機能し、Vue はコンポーネントと対話でき、コンポーネントは jQuery (またはその他) を使用して内部 DOM 要素を操作できます。

jQueryセレクターの外側ライフサイクルフックは悪いコードの臭いです。validatePhoneNumberセレクターと DOM 操作呼び出しを使用していますが、keydownイベントの処理には Vue を使用しています。このウィジェットのすべてを jQuery で処理する必要があります。クラスや phone_number の設定やイベントの処理に Vue を使用しないでください。これらはすべて DOM 操作です。前述したように、コンポーネントにラップすると、コンポーネントにプロパティを渡すことができ、それらのプロパティから jQuery を使用してクラスと phone_number を設定できます。

おすすめ記事