is it possible to use a v-for in vue for non-array objects from a json file?

Question

i am trying to pass some values from a json file to a component however i keep getting "product is undefined"

product.json

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

component in vue js:

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

How can i get rid of this error?

For using v-for you should use array. So the product should be an array itself. — SMAKSS
– SMAKSS, Commented Apr 18, 2020 at 4:48

Shoejep · Accepted Answer · 2020-04-18 09:27:18Z

1

If you defined product in the data of your Vue instance, you could use it within the v-for.

I've included a working version in the fiddle below.

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>

answered Apr 18, 2020 at 9:27

Shoejep

4,8795 gold badges26 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Radu Diță · Accepted Answer · 2020-04-18 06:47:39Z

1

I'm guessing you need to loop over the keys of the object.

You can use Object.keys for this.

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

answered Apr 18, 2020 at 6:47

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

is it possible to use a v-for in vue for non-array objects from a json file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related