Sujet auto resolu j'ai oublié de déclaré inventory dans les props ....
J'ai un projet vue JS avec une page qui affiche des fruits et des légumes. un bouton panier qui affiche une sidebar avec des informations sur les produits sélectionnés.
J'ai réussi à afficher les noms des produits sélectionnés, ainsi que leurs quantités.
Maintenant j'essaie d'afficher le prix et j'ai un bug. Si je sélectionne aucun produit et que je clique sur le bouton panier la sidebar s'affiche. Et si j'ajoute un produit, quand je clique sur le bouton pour afficher le panier la sidebar ne s'affiche plus. et la console m'affiche :
J'ai l'impression que la ligne importante est :
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'find')
mais la réponse complète de la console est :
vue@next:7980 [Vue warn]: Property "inventory" was accessed during render but is not defined on instance.
at <Sidebar key=0 toggle=fn<bound toggleSidebar> cart= {Artichokes: 1} ... >
at <App>
warn$1 @ vue@next:7980
get @ vue@next:7443
getPrice @ app.html:137
eval @ VM2364:65
renderList @ vue@next:7209
render @ VM2364:61
renderComponentRoot @ vue@next:1947
componentUpdateFn @ vue@next:5656
run @ vue@next:568
setupRenderEffect @ vue@next:5782
mountComponent @ vue@next:5565
processComponent @ vue@next:5523
patch @ vue@next:5129
patchBlockChildren @ vue@next:5432
processFragment @ vue@next:5493
patch @ vue@next:5122
componentUpdateFn @ vue@next:5733
run @ vue@next:568
callWithErrorHandling @ vue@next:8097
flushJobs @ vue@next:8329
Promise.then (asynchrone)
queueFlush @ vue@next:8223
queueJob @ vue@next:8217
(anonyme) @ vue@next:5765
triggerEffects @ vue@next:758
trigger @ vue@next:734
set @ vue@next:875
set @ vue@next:7454
toggleSidebar @ app.html:118
callWithErrorHandling @ vue@next:8097
callWithAsyncErrorHandling @ vue@next:8106
invoker @ vue@next:9380
vue@next:7980 [Vue warn]: Unhandled error during execution of render function
at <Sidebar key=0 toggle=fn<bound toggleSidebar> cart= {Artichokes: 1} ... >
at <App>
warn$1 @ vue@next:7980
logError @ vue@next:8154
handleError @ vue@next:8146
renderComponentRoot @ vue@next:1976
componentUpdateFn @ vue@next:5656
run @ vue@next:568
setupRenderEffect @ vue@next:5782
mountComponent @ vue@next:5565
processComponent @ vue@next:5523
patch @ vue@next:5129
patchBlockChildren @ vue@next:5432
processFragment @ vue@next:5493
patch @ vue@next:5122
componentUpdateFn @ vue@next:5733
run @ vue@next:568
callWithErrorHandling @ vue@next:8097
flushJobs @ vue@next:8329
Promise.then (asynchrone)
queueFlush @ vue@next:8223
queueJob @ vue@next:8217
(anonyme) @ vue@next:5765
triggerEffects @ vue@next:758
trigger @ vue@next:734
set @ vue@next:875
set @ vue@next:7454
toggleSidebar @ app.html:118
callWithErrorHandling @ vue@next:8097
callWithAsyncErrorHandling @ vue@next:8106
invoker @ vue@next:9380
vue@next:7980 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Sidebar key=0 toggle=fn<bound toggleSidebar> cart= {Artichokes: 1} ... >
at <App>
warn$1 @ vue@next:7980
logError @ vue@next:8154
handleError @ vue@next:8146
callWithErrorHandling @ vue@next:8100
flushJobs @ vue@next:8329
Promise.then (asynchrone)
queueFlush @ vue@next:8223
queueJob @ vue@next:8217
(anonyme) @ vue@next:5765
triggerEffects @ vue@next:758
trigger @ vue@next:734
set @ vue@next:875
set @ vue@next:7454
toggleSidebar @ app.html:118
callWithErrorHandling @ vue@next:8097
callWithAsyncErrorHandling @ vue@next:8106
invoker @ vue@next:9380
app.html:137 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'find')
at Proxy.getPrice (app.html:137)
at eval (eval at compileToFunction (vue@next:15479), <anonymous>:65:74)
at renderList (vue@next:7209)
at Proxy.render (eval at compileToFunction (vue@next:15479), <anonymous>:61:71)
at renderComponentRoot (vue@next:1947)
at ReactiveEffect.componentUpdateFn [as fn] (vue@next:5656)
at ReactiveEffect.run (vue@next:568)
at setupRenderEffect (vue@next:5782)
at mountComponent (vue@next:5565)
at processComponent (vue@next:5523)
Au niveau du code dans app.html voici mon composant :
Je ne sais pas si ça viens du fait que price contient une valeur USD et une valeur NOK, si ça viens que la valeur et de type nombre, ou si l'erreur viens d'autre part ....
Quelqu'un pour m'aiguiller ?
- Edité par Tortue_Ninja 12 octobre 2021 à 17:18:33
Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'
Afficher le prix sur un panier avec VueJS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Seul on va plus vite, ensemble on va plus loin. 'KawaBunga'