VueJS détecte quand DOM est prêt après avoir utilisé push() pour ajouter un nouvel élément

Question

Dans vueJS j'ai un <table>. si je clique sur un bouton une nouvelle ligne va s'insérer dans la table en utilisant

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

Le problème est que j'utilise cette fonction:

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

Cette fonction est jquery que forcer les entrées seulement être entier. Donc, quand une nouvelle ligne est ajoutée avec une entrée, la fonction ci-dessus ne fonctionne plus.

Si j'ajoute une nouvelle ligne et exécuter

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

Il fera la nouvelle ligne acceptent seulement des entiers

J'ai aussi essayé de le faire tout en une fois comme ceci:

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

Pour basculer l'aide numérique juste après mais cela ne fonctionne pas. Alors, comment puis-je détecter quand une nouvelle ligne est ajoutée afin que je puisse exécuter l'aide numérique après?

Answer 1

Je voudrais utiliser une directive pour cela, tel quel.

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

Dans le modèle:

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

Working pen.

Answer 2

Vous pouvez utiliser Vue.nextTick(). https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

Afin d'attendre jusqu'à ce que Vue.js a terminé la mise à jour du DOM après un changement de données , vous pouvez utiliser Vue.nextTick (rappel) immédiatement après que les données est modifiée. Le rappel sera appelé après le DOM a été mis à jour