新しい要素を追加するためにpush（）を使用した後、DOMの準備ができたらVueJSを検出します

Question

私は<table>を持っています。

$(".price").numeric({ 
     decimal: false, 
     negative: false 
     }); 

これはのみへの入力を強制するjqueryの関数である：私はボタンをクリックすると、新しい行が

this.rows.push({ 
     title: '', 
     price: '' 
     }); 

問題を使用して、テーブルに挿入されますが、私はこの機能を使用していますということです整数である。 入力がある新しい行が追加されたとき、上記の関数はもはや機能しません。

私は新しい行を追加し、

$(".u-price").numeric({ 
     decimal: false, 
     negative: false 
     }); 

を実行する場合それは私もこのように一度にそれをすべて行うことを試みた

新しい行が整数のみ

を受け入れるようになります：

addRow() { 
     this.rows.push({ 
     title: '', 
     price: '', 
     }); 
     $(".price").numeric({ 
     decimal: false, 
     negative: false 
     }); 
    }, 

数値ヘルパーをすぐに切り替えることはできますが、それは機能しません。 その後、数値ヘルパーを実行できるように、新しい行が追加されたときはどうすれば検出できますか？

Answer 1

私はこのためにディレクティブをそのまま使用します。テンプレートで

Vue.directive('numeric', { 
    inserted(el) { 
    $(el).numeric({ 
     decimal: false, 
     negative: false 
    }) 
    } 
}) 

：

<input v-numeric type="text" /> 

Working pen。

Answer 2

Vue.nextTick()を使用できます。 Vue.jsまで待つためにhttps://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

が データ変更後DOMの更新が終了している、あなたは データが変更された直後にVue.nextTick（コールバック）を使用することができます。コールバックは、DOMが に更新された後に呼び出されます。