[Vuejs]-V-for loop not returning data Vue.js

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)

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>