v-for循环不返回数据Vue.js

编程问答 2022-06-09

问题描述

我是Vue.js的新手，并且正在学习教程。我正在尝试使用下面的json中的数据进行v-for循环。但是，在div和页面中均未呈现任何内容。我找不到任何语法错误。有人可以帮忙吗？

<body>
        <div id="app" v-for="item in products">
            <img :src="item.img" :alt="item.img" style="width: 250px; height:250px">
            <h1>{{item.name}}</h1>
            <p>{{item.description}}</p>
            <p>${{item.price}}.00</p>
        </div>
    <script>
        var data = {
            products: [
                {
                    "name": "Bamboo Thermal Ski Coat","description": "You'll be the most environmentally friendly skier in this!","img": "https://hplussport.com/wp-content/uploads/2016/12/ski-coat_LYNDA_29940.jpg","price": 99
                },{
                    "name": "@jenlooper","img": "https://user-images.githubusercontent.com/41929050/61567048-13938600-aa33-11e9-9cfd-712191013192.jpeg","description": "This project is a good learning project to get comfortable with soldering and programming an Arduino.","price": 5
                },{
                    "name": "jenlooper","img": "https://user-images.githubusercontent.com/41929050/61567049-13938600-aa33-11e9-9c69-a4184bf8e524.jpeg","description": "Use craft items you have around the house,plus two LEDs and a LilyPad battery holder,to create a useful book light for reading in the dark.","price": 63
                },"img": "https://user-images.githubusercontent.com/41929050/61567053-13938600-aa33-11e9-9780-104fe4019659.png","description": "Create a web-connected light-strip API controllable from your website,using the Particle.io.","price": 867
                },{
                    "name": "sailorhg","img": "https://user-images.githubusercontent.com/41929050/61567054-13938600-aa33-11e9-9163-eec98e239b7a.png","description": "Visualization of sailor scouts sorted by bubblesort algorithm by their planet\u0027s distance from the sun","price": 71
                },"img": "https://user-images.githubusercontent.com/41929050/61567055-142c1c80-aa33-11e9-96ff-9fbac6413625.png","description": "Light-up corsage I made with my summer intern.","price": 456
                },],};
        new Vue({
            el: '#app',data: data
        })
    </script>
    </body>

解决方法

只需更改您的代码

var data = {...}

收件人

data（）{返回{product：[...]}}

它将起作用。

enter image description here

  • 在最近的vue.js中，建议您在使用v-for时放置“ v-key”，但仍然可以使用（运行程序时也不能使用v-key）
,

以容器div#app和data为功能，以这种方式尝试，您可以在此处进行验证：https://jsfiddle.net/boilerplate/vue 

<body>
        <div id="app">
          <div v-for="(item,i) in products" :key="i">
            <img :src="item.img" :alt="item.img" style="width: 250px; height:250px">
            <h1>{{item.name}}</h1>
            <p>{{item.description}}</p>
            <p>${{item.price}}.00</p>
          </div>
        </div>
    <script>
        var data = {
            products: [
                {
                    "name": "Bamboo Thermal Ski Coat","description": "You'll be the most environmentally friendly skier in this!","img": "https://hplussport.com/wp-content/uploads/2016/12/ski-coat_LYNDA_29940.jpg","price": 99
                },{
                    "name": "@jenlooper","img": "https://user-images.githubusercontent.com/41929050/61567048-13938600-aa33-11e9-9cfd-712191013192.jpeg","description": "This project is a good learning project to get comfortable with soldering and programming an Arduino.","price": 5
                },{
                    "name": "jenlooper","img": "https://user-images.githubusercontent.com/41929050/61567049-13938600-aa33-11e9-9c69-a4184bf8e524.jpeg","description": "Use craft items you have around the house,plus two LEDs and a LilyPad battery holder,to create a useful book light for reading in the dark.","price": 63
                },"img": "https://user-images.githubusercontent.com/41929050/61567053-13938600-aa33-11e9-9780-104fe4019659.png","description": "Create a web-connected light-strip API controllable from your website,using the Particle.io.","price": 867
                },{
                    "name": "sailorhg","img": "https://user-images.githubusercontent.com/41929050/61567054-13938600-aa33-11e9-9163-eec98e239b7a.png","description": "Visualization of sailor scouts sorted by bubblesort algorithm by their planet\u0027s distance from the sun","price": 71
                },"img": "https://user-images.githubusercontent.com/41929050/61567055-142c1c80-aa33-11e9-96ff-9fbac6413625.png","description": "Light-up corsage I made with my summer intern.","price": 456
                },],};
        new Vue({
            el: '#app',data() { return data }
        })
    </script>
    </body>
,

创建一个单独的#app div并在函数中返回数据即可。

<div id="app">
          <div v-for="(item,data() { return data }
        })
    </script>
javascriptv-forvue.js