Problème avec v-model.lazy

Bonsoir à tous ! :slight_smile:

Je suis à mes débuts avec Vue.js, je vous prie donc de bien vouloir être indulgent face à mes éventuelles erreurs.

Je rencontre actuellement un problème avec la directive v-model et le modificateur lazy.

J’ai un compteur qui s’incrémente de 1 à chaque seconde (variable temps), la fonction est lancée lors de l’étape mounted.
J’ai crée un input avec un v-model.lazy et devrait donc changer sa valeur dès qu’il perd le focus, le problème c’est qu’à chaque seconde l’input réinitialise sa valeur à la valeur de choixcouleurs

Je vous joins les parties du code concernés, lorsque je supprime le compteur l’input fonctionne correctement.

Code HTML :

Capture

Code JS :

Capture

Merci de bien vouloir m’aider à résoudre ce problème ^^’
Je peux vous envoyer le code complet si besoin, c’est un site test pour apprendre à utiliser Vue.js.

Bonne journée :slight_smile:

Hello CrazyGeekMan !

Tel que je vois le code, je ne comprends pas pourquoi cela se produit.
(cela dit sur la capture d’écran il n’y a pas de modificateur .lazy sur v-model).

Je me demande si il n’y a pas un autre facteur qui déclenche ce comportement.

Je veux bien le reste du code

Sinon je me permets une remarque, vu que tu débutes :slight_smile:

Au lieu d’utiliser le hook mounted , vu que tu n’as pas d’interaction avec d’éléments du DOM (dans mounted), tu peux utiliser le hook created à la place. C’est absolument pas critique mais je pense que ça aide à la lisibilité.

C’est bien cool de se faire un site test pour apprendre. Au top !

Merci pour ta réponse :slight_smile:

Voici comme demandé je te joins l’index.html avec mon fichier JavaScript où j’instancie la Vue (j’utilise aussi Bootstrap) :

index.html (je l’ai mis en .txt pour qu’il s’affiche correctement sur le site) : https://www.cjoint.com/doc/19_05/IEEsLMlhnsI_index.txt

Fichier JS : https://www.cjoint.com/doc/19_05/IEEsQQdip5I_vueInstance.js

Pour Vue.js tu peux supprimer le commentaire pour prendre le script CDN
T’auras aussi besoin de prendre un CDN pour bootstrap.
fonctions.js tu peux supprimer ça n’a pas de grande utilité :stuck_out_tongue:

S’il y a quelque chose qui cloche n’hésite pas à me le dire :wink:

Quand j’ai dis que je fais un site c’est très grossier :smile:
Il est préférable de dire que je fais des tests sur les nombreux outils que propose Vue.js ^^’

Voici un résultat où l’input avec Hello pose problème, j’ai remarqué que quand t’écris vite dedans puis tu retire le focus ça change bien la valeur de choixcouleur :
https://hashtagstagetropb1.000webhostapp.com/

Merci à toi de m’aider :slight_smile:

Toutes les remarques pertinentes sont bonnes à prendre, encore merci :smiley:

:+1: je teste le tout à midi

OK, je sais pourquoi.

Toutes les secondes, la valeur de this.temps est modifiée.
Comme du coup l’une de ses propriétés est modifiée, l’instance principale est “mise à jour” et re-rendue.
L’application réapplique les valeurs de toutes les propriétés. Comme entre temps choixcouleur n’a pas encore été modifié (grâce au modificateur .lazy la valeur ne change vraiment qu’à la perte de focus) alors c’est la valeur que Vue connaît qui est reprise pour faire la mise à jour du rendu.

Tu peux le voir si tu passes par exemple l’interval à 10 secondes. Tu auras le temps de modifier la valeur de l’input et de lui faire perdre le focus.

Par contre le changement de couleur du texte ne fonctionnera pas mais pour une autre raison. Je te laisse chercher cette partie, je pense que c’est ta prochaine étape ^^ (cela dit hésites pas à demander si tu galères)

Pour moi la solution à ton problème est de virer le modificateur lazy ou de chercher un moyen de ne pas faire s’updater l’instance principale.

Remarque :
Tu peux utiliser un hook updated qui est exécuté à chaque mise à jour de l’instance pour te rendre compte du fonctionnement que je décris.

[…]
updated: function() {
console.log("appelé chaque seconde : ", this.temps);
},

mounted: function() {
this.arret = setInterval(() => {
this.temps++;
}, 1000);
},
[…]

Citation de Serguei
Toutes les secondes, la valeur de this.temps est modifiée.
Comme du coup l’une de ses propriétés est modifiée, l’instance principale est “mise à jour” et re-rendue.
L’application réapplique les valeurs de toutes les propriétés. Comme entre temps choixcouleur n’a pas encore été modifié (grâce au modificateur .lazy la valeur ne change vraiment qu’à la perte de focus) alors c’est la valeur que Vue connaît qui est reprise pour faire la mise à jour du rendu.

J’ai fais la même hypothèse mais je voulais qu’elle soit confirmée par quelqu’un plus calé que moi :slight_smile:

Citation de Serguei
Par contre le changement de couleur du texte ne fonctionnera pas mais pour une autre raison. Je te laisse chercher cette partie, je pense que c’est ta prochaine étape ^^ (cela dit hésites pas à demander si tu galères)

Bien évidemment, j’ai du mal à continuer lorsque je coince quelque part. Je voulais d’abord résoudre ce souci avant de continuer à implémenter la suite des fonctionnalités.

Citation de Serguei
Pour moi la solution à ton problème est de virer le modificateur lazy ou de chercher un moyen de ne pas faire s’updater l’instance principale.

C’est vrai que supprimer lazy résous le problème, cela dit j’ai peur que ce cas refasse surface c’est pourquoi j’aurais aimé apprendre à le résoudre ^^’

Le problème c’est que si l’instance principale ne se met pas à jour alors même temps sera figé.
Il faudrait donc désactiver les setters de choixcouleur lorsque l’input a le focus ? (mais dans ce cas lazy n’a plus d’intérêt)

Je t’avoue que je ne vois aucune solution simple, la propriété computed ne peut pas être utilisée dans ce cas de figure.

Si quelqu’un voit une solution je suis preneur :wink:

Merci Serguei :sunny: