堆栈内存溢出
  繁体   English   中英

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

[英]v-for loop not returning data Vue.js

 原文  2020-10-09 14:49:41  4   3    javascript/ vue.js/ v-for

问题描述

我是 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
                },
                {
                    "name": "@jenlooper",
                    "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
                },
                {
                    "name": "sailorhg",
                    "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>

3 个解决方案

解决方案1
 0  2020-10-09 15:04:34

只需更改您的代码

var 数据 = { ... }

到

数据（）{返回{产品：[...]}}

它会起作用。

在此处输入图片说明

  • 在最近的vue.js中建议在使用v-for时加上'v-key'，但它仍然有效（运行程序时没有v-key也可以）

解决方案2
 0 已采纳  2020-10-09 15:07:18

试试这种方式，用一个容器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
                },
                {
                    "name": "@jenlooper",
                    "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
                },
                {
                    "name": "sailorhg",
                    "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>

解决方案3
 0  2020-10-12 12:25:02

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

<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
                },
                {
                    "name": "@jenlooper",
                    "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
                },
                {
                    "name": "sailorhg",
                    "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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在v-for循环中访问元素的数据（Vue.js） 在 v-for 循环中显示 VUE.JS vue.js 中的 v-for 循环 V-for vue.js数据 Vue.js：v-for循环在野生动物园中颠倒顺序 Vue.js 正确随机排序 v-for 循环 Vue.js 在 v-for 循环中访问嵌套对象 Vue.js：v-for 循环内的 Textarea 不起作用 v-for 循环中的 Vue.js ref 仅在 VUE.js v-for 循环中添加唯一项
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM