v-for loop not returning data Vue.js
Question
I'm new to Vue.js and following a tutorial. I'm trying out the v-for loop using the data in the json below. However nothing is being rendered in the div and therefore the page. I can't spot any syntax errors. Can anyone help?
<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 answers
solution1
0 2020-10-09 15:04:34
just change you code
var data = { ... }
To
data() { return { product: [...] } }
and it will work.
- in recent vue.js it is recommended to put 'v-key' when you use v-for, but it still works (no v-key is also ok when you run the program)
solution2
0 ACCPTED 2020-10-09 15:07:18
try it this way, with a container div#app and data as a function, you can verify here: 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>
solution3
0 2020-10-12 12:25:02
Creating a separate #app div and returning the data within a function works.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Access an element's data in a v-for loop (Vue.js)
display in a v-for loop VUE.JS
v-for loop in vue.js
V-for vue.js data
Vue.js: v-for loop reverses order in safari
Vue.js proper random ordering of v-for loop
Vue.js access nested object in v-for loop
Vue.js: Textarea inside v-for loop is not working
Vue.js ref inside the v-for loop
Add only unique items in a VUE.js v-for loop
Related Tags