Vue.js中v-for循环无法渲染数据的问题求助

Hey there! I can spot the issue right away - you're applying the v-for directive directly to the root element that Vue is mounted to (#app), which won't work as expected.

The Problem #

Vue uses the element specified in el as the root container for your application. When you put v-for on this root element, Vue can't properly render the loop because it needs a single root node to attach the instance to. Trying to loop on the root would attempt to create multiple root instances, which isn't allowed.

The Solution #

Move the v-for to a child element inside the #app div. This way, the root #app remains a single container, and the loop renders multiple child elements inside it.

Here's your corrected code:

<body>
  <div id="app">
    <!-- Move v-for to this inner div + add unique key -->
    <div v-for="item in products" :key="item.name">
      <img :src="item.img" :alt="item.name" 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's 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>

Extra Tip #

I also added a :key directive to the looped element - this is a Vue best practice for list rendering. It helps Vue track each item's unique identity, which optimizes re-renders and prevents unexpected behavior. Using a unique value like item.name (or a dedicated ID field if your data had one) is ideal.

Give this a try, and your products should render correctly now!

内容的提问来源于stack exchange，提问作者anon