Aujourd’hui, c’était galère. Je me suis prise la tête avec Vue pour… une connerie. Du coup je partage, on ne sait jamais ça peut être utile à quelqu’un.
L’objectif: pré-sélectionner un champ select qui a une correspondance dans un tableau reçu d’une API ou autre.
- Temps perdu: 4 heures.
- Temps de lecture de l’article: 2 minutes.
Du coup, faisons les choses correctement.
On va zapper le moment où on récupère un array venant d’une API. Pour ma part, j’utilise Vuex pour faire ça. Mais il ne faut pas oublier la méthode beforeDestroy parce que tout ce qui est dans le store reste pendant toute la durée de la session. Et quand tu récupères des centaines et des centaines d’éléments, c’est le navigateur côté client qui en subit les conséquences.
Donc n’oublie pas de réinitialiser ton state lorsque les composants qui l’utilisent sont détruits.
Le code d’un select est vraiment bateau. Mon problème était de binder une valeur déjà existante depuis un tableau.
Problème à la con me direz-vous. (Je suis totalement d’accord)
À retenir
L’attribut v-model du select ne prend pas d’objet en compte. La cause est celle-ci: il compare des types primitifs.
Rappel: en envoyant un objet, celui-ci compare l’adresse mémoire de l’objet et non un comparatif de l’objet en lui-même.
En envoyant un objet, il va comparer l’adresse mémoire de celui-ci avec les adresses mémoires du tableau correspondant aux options. Par conséquent, il ne les trouvera jamais.
Maintenant, toi aussi; tu sais.
En espérant qu’avec ce petit billet, il y aura moins de gens en galère.