为什么我的 v-for 不循环？带有 JSON 的 VUE.JS

Question

我正在加载来自 .json 的数据，但 v-for 不返回循环。

我的 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>

我的 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;
    });
}
});

我的 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"
    }
   ]
  }

如果我像这样用 HTML 编写它是行不通的，但如果我把

{{ product[3].brand }}

例如...我只能看到这个，只是循环不起作用。

Answer 1

将您的模板更改为如下所示...

<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 模板需要 <template> 标签之间的单个根元素，而且我相信 v-for 在根元素上无法正常工作，因此我将其嵌套在“包装器”中。

如果您查看您的开发工具控制台，您可能会看到类似这样的错误。

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

或

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

---

附加

---

您的代码似乎还有其他问题。在我看来，您的请求应该如下所示，除非我遗漏了有关您的 json 被返回方式的信息。

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

},

注意从response.body 到response.body.products 的变化也可以将self 分配给this，但我发现使用.bind(this) 更简洁。

这是一个基于您的代码的工作小提琴。 https://jsfiddle.net/skribe/umx98rxm/