1

I'm loading the data coming from a .json but the v-for does not return a loop.

MY HTML:

<div id="app">
    <template v-for="product in products">
        <p>{{ product.brand }}</p>
        <p>{{ product.images }}</p>
        <p>{{ product.id }}</p>
        <p>{{ product.title }}</p>
        <p>{{ product.description }}</p>
        <p>{{ product.price }}</p>
    </template>

</div>

MY JS:

new Vue({
el: '#app',
data: {
    products: []

},
methods: {

},
created: function() {
    var self = this;
    self.$http.get('http://localhost/app/products.json').then(function(response) {
        self.products = response.body;
    });
}
});

MY JSON:

"product": [
    {
        "brand": "Apple",
        "images":"images/iphone-x-64-gb.jpg",
        "id": "iphone-x-64-gb",
        "title": "iPhone X 64 GB",
        "description": "Lorem ipsum dolor",
        "price": "1.159,00"
    },
    {
        "brand": "Apple",
        "images":"images/iphone-x-256-gb.jpg",
        "id": "iphone-x-256-gb",
        "title": "iPhone X 256 GB",
        "description": "Lorem ipsum dolor",
        "price": "1.329,00"
    },
    {
        "brand": "Apple",
        "images":"images/iphone-8-64-gb.jpg",
        "id": "iphone-8-64-gb",
        "title": "iPhone 8 64 GB",
        "description": "Lorem ipsum dolor.",
        "price": "819,99"
    }
   ]
  }

if I write in HTML like this dosen't work but if I put

{{ product[3].brand }}

for example ... I can see only this one, just loop dosen't working.

Improve this question

1 Answer 1

Reset to default
3

Change your template to be something like the following...

<template>
    <div class="wrapper">
        <div  v-for="product in products">
              <p>{{ product.brand }}</p>
              <p>{{ product.images }}</p>
              <p>{{ product.id }}</p>
              <p>{{ product.title }}</p>
              <p>{{ product.description }}</p>
              <p>{{ product.price }}</p>
        </div>  
    </div>
</template>

Vue templates require a single root element between the <template> tags and also I believe v-for won't work properly on root element so I am nesting that in a "wrapper."

If you look in your dev tools console you probably will see an error that says something like. 

Cannot use v-for on stateful component root element because it 
renders multiple elements.

or 

[Vue warn]: Multiple root nodes returned from render function. 
Render function should return a single root node.

Additional

Also it appears you may have some other issues with your code. It seems to me your request should be like the following unless I am missing something about the way your json is being returned. 

created: function() {
   this.$http.get('http://localhost/app/products.json').then(function(response) {
   this.products = response.body.products;
}.bind(this));

},

Notice the change from response.body to response.body.products Also it is fine to assign self to this but I find using .bind(this) more succinct.

Here is a working fiddle based on your code. https://jsfiddle.net/skribe/umx98rxm/

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

5 Comments

You can also put another element inside the <template> tag working as root. I agree that using a div (span or whatever) instead of <template> is a better approach in this case though.
@Lucas G. What do you mean "..another element inside the <template> tag?" You mean a second <template> tag inside the first? You can use additional <template> or <slot> tags nested in the main <template> tag as throw away elements that wont get rendered, but they wont work as root element in my experience. You have to use a div or span then the nested template or slots.
Hi thank you for your effort, but this has not worked yet. I'm use Vue 2.5.13 and vue-resource v1.3.4 - github.com/pagekit/vue-resource too, in inspect vue component I can see the <root> / data / products: Object / product: Array[3] / 0: Object / here the content of json normally. I think I got lost in the scopo.
I made an edit to my answer above. Have a look at the working example here as well. jsfiddle.net/skribe/umx98rxm (note the myjson service I am using to load the json can be rather slow so just wait for it to load. )
If this was the answer to your issues, I would appreciate you marking the answer as accepted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.