J'essaye de passer des valeurs d'un fichier json à un composant mais je continue à recevoir "le produit n'est pas défini"

Product.json

{
    "product": {
        "price": 1.11,
        "amount": 0.11
    }
}

Composant dans vue js:

<div v-for="prod in product" :key="price">

Comment puis-je me débarrasser de cette erreur?

0
J Moss 18 avril 2020 à 07:40

2 réponses

Meilleure réponse

Si vous avez défini product dans les données de votre instance Vue, vous pouvez l'utiliser dans le v-for.

J'ai inclus une version de travail dans le violon ci-dessous.

let productJson = {
    "product": {
        "price": 1.11,
        "amount": 0.11
    }
};

new Vue({
  el: "#app",
  data: () => {
    return productJson;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(value, key) in product">{{key}}: {{value}}</div>
</div>
1
Shoejep 18 avril 2020 à 09:27

Je suppose que vous devez faire une boucle sur les clés de l'objet.

Vous pouvez utiliser Object.keys pour ça.

<div v-for="prodKey in Objects.keys(products)" :key="products[prodKey].price">

1
Radu Diță 18 avril 2020 à 06:47