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>

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

我的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写这样的工作，但如果我放了

例如......我只能看到这一个，只是循环使用了。

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在根元素上无法正常工作，因此我将其嵌套在＆＃34;包装器中。＆＃ 34;

如果你查看你的开发工具控制台，你可能会看到一个类似的错误。

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/

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

1 个答案:

其他