Réactivité dans la vue js v-model lors de la mise à jour de la valeur via JS/certains plugins

Question

Je rencontre actuellement quelques problèmes pour comprendre comment fonctionne la réactivité du v-model de VueJS. J'ai un plugin de sélection qui m'aide à sélectionner des champs, mais il change bien sûr la valeur du champ de sélection via JS, le problème est qu'il ne déclenche jamais de v-model pour mettre à jour sa valeur, la même chose arrive si j'essaie de document.getElementById('field').value = 'whatever', v-model ne sera pas mis à jour si je le fais, il ne sera mis à jour lorsque je tape directement dans le champ ou lorsque je clique sur le champ de sélection réel. Comme je l'ai lu, il semble que Vue n'écoute que l'événement input pour déclencher sa réactivité, et quand je change simplement la valeur du champ avec JS, l'événement ne sera pas déclenché, mais ne mettra pas à jour la valeur de la variable .

J'ai vraiment besoin de comprendre cela plus profondément et de trouver la meilleure façon de gérer ce genre de problèmes quand ils se produisent. Quelle serait la meilleure solution dans ce cas où je n'ai aucun contrôle sur les événements du plugin? Comment est-ce que je pourrais faire en sorte que Vue écoute quand la valeur est changée dynamiquement et n'a plus jamais ce problème?

Merci pour l'aide!

Answer 1

Je ne suis pas entièrement sûr si cela va aider, mais avez-vous regardé les composants d'entrée de formulaire? Votre composant d'entrée doit renvoyer l'événement à l'extérieur pour qu'il mette à jour la valeur de v-model associée au composant.

Vous pouvez également vérifier watchers si vous éprouvez des difficultés à déterminer si la valeur d'entrée a changé https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

J'espère que cette aide.