[Résolu] Afficher le prix sur un panier avec VueJS par Tortue_Ninja - page 1

Bonjour a tous,

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 :

      <sidebar 
        v-if="showSidebar" 
        :toggle="toggleSidebar" 
        :cart="cart"
        :inventory="inventory"
        />

Dans mon script vue j'appelle une methode getPrice()

        methods: {
          getPrice(name) {
            const product = this.inventory.find((p) => {
              return p.name === name
            })
            return product.price.USD
          }
        }

dans mon template le bout de code qui affiche toute les informations dans la sidebar est :

                <tr v-for="(quantity, key, i) in cart" :key="i">
                  <td><i class="icofont-carrot icofont-3x"></i></td>
                  <td>{{ key }}</td>
                  <td>\${{ getPrice(key) }}</td>
                  <td class="center">{{ quantity }}</td>
                  <td>\${{ cart.carrots * 4.82 }}</td>
                  <td class="center">
                    <button class="btn btn-light cart-remove">
                      &times;
                    </button>
                  </td>
                </tr>

Puis enfin le fichier JSON contenant les information de chaque produit.

[
  { "id": 1,  "name": "Raddishes",   "icon": "raddish",    "price": { "USD": 3.26, "NOK": 17.43 }, "type": "vegetable" },
  { "id": 2,  "name": "Artichokes",  "icon": "artichoke",  "price": { "USD": 9.44, "NOK": 15.82 }, "type": "vegetable" },
  { "id": 3,  "name": "Broccoli",    "icon": "broccoli",   "price": { "USD": 5.20, "NOK": 16.66 }, "type": "vegetable" },
  { "id": 5,  "name": "Cabbages",    "icon": "cabbage",    "price": { "USD": 0.95, "NOK": 62.33 }, "type": "vegetable" },
  { "id": 6,  "name": "Cherries",    "icon": "cherry",     "price": { "USD": 1.04, "NOK": 62.50 }, "type": "fruit"     },
  { "id": 7,  "name": "Carrots",     "icon": "carrot",     "price": { "USD": 4.82, "NOK": 72.74 }, "type": "vegetable" },
  { "id": 8,  "name": "Corn",        "icon": "corn",       "price": { "USD": 7.53, "NOK": 99.43 }, "type": "vegetable" },
  { "id": 9,  "name": "Grapes",      "icon": "grapes",     "price": { "USD": 4.94, "NOK": 88.29 }, "type": "fruit"     },
  { "id": 10, "name": "Onions",      "icon": "onion",      "price": { "USD": 6.45, "NOK": 69.53 }, "type": "vegetable" },
  { "id": 11, "name": "Oranges",     "icon": "orange",     "price": { "USD": 9.95, "NOK": 96.53 }, "type": "fruit"     },
  { "id": 12, "name": "Peas",        "icon": "peas",       "price": { "USD": 2.61, "NOK": 65.74 }, "type": "vegetable" },
  { "id": 13, "name": "Pineapples",  "icon": "pineapple",  "price": { "USD": 1.62, "NOK": 35.22 }, "type": "fruit"     },
  { "id": 14, "name": "Steaks",      "icon": "steak",      "price": { "USD": 8.32, "NOK": 83.08 }, "type": "meat"      },
  { "id": 15, "name": "Watermelons", "icon": "watermelon", "price": { "USD": 5.08, "NOK": 89.69 }, "type": "fruit"     },
  { "id": 16, "name": "Sausages",    "icon": "sausage",    "price": { "USD": 3.69, "NOK": 26.68 }, "type": "meat"      }
]

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

Afficher le prix sur un panier avec VueJS

Afficher le prix sur un panier avec VueJS

Supprimer

Modérer

Signaler le message aux modérateurs