时间戳

首页 > 解决方案 > 在 Vue.js 中循环数据

vuejs2 - 在 Vue.js 中循环数据

问题描述

我有三个列表项，我正在尝试使用Vue.js. 显示单个项目时它工作正常，但是当我尝试显示多个项目时它不起作用。 代码笔链接

var data = {
  products : [
    {
    "id": "532",
    "name": "Bamboo Thermal Ski Coat",
    "description": "You'll be the most environmentally conscious skier on the slopes - and the most stylish wearing our fitted bamboo thermal ski coat, made from organic bamboo with recycled plastic down filling. ",
    "image": "https://cdn.shopify.com/s/files/1/0133/3248/0100/products/JAYCOSIN-Women-s-Coat-Fashion-Womens-Ladies-Warm-Faux-Fur-Comfortable-Coat-Sexy-Jacket-Winter-Solid_2048x2048.jpg?v=1574355729",
    "price": "99" 
  },
    {
    "id": "532",
    "name": "Bamboo Thermal Ski Coat",
    "description": "You'll be the most environmentally conscious skier on the slopes - and the most stylish wearing our fitted bamboo thermal ski coat, made from organic bamboo with recycled plastic down filling. ",
    "image": "https://cdn.shopify.com/s/files/1/0133/3248/0100/products/JAYCOSIN-Women-s-Coat-Fashion-Womens-Ladies-Warm-Faux-Fur-Comfortable-Coat-Sexy-Jacket-Winter-Solid_2048x2048.jpg?v=1574355729",
    "price": "99" 
  },
    {
    "id": "532",
    "name": "Bamboo Thermal Ski Coat",
    "description": "You'll be the most environmentally conscious skier on the slopes - and the most stylish wearing our fitted bamboo thermal ski coat, made from organic bamboo with recycled plastic down filling. ",
    "image": "https://cdn.shopify.com/s/files/1/0133/3248/0100/products/JAYCOSIN-Women-s-Coat-Fashion-Womens-Ladies-Warm-Faux-Fur-Comfortable-Coat-Sexy-Jacket-Winter-Solid_2048x2048.jpg?v=1574355729",
    "price": "99"  
  }
 ]
}

var app = new Vue({
  el: "#app",
  data: data
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div  class="container" id="app">
  <div class="row d-flex mb-3 align-item-center" v-for="item in products">
    <div class="col-sm-4">
      <a :href="href">
    <img class="img-fluid" :src="item.image" :alt="item.name" width="250" height="300">
  </a>
  </div>
    <div class="col">
      <h3 class="text-info">{{ item.name}}</h3>
      <p class="mb-0">{{ item.description}}</p>
      <div class="h5 float-right">$ {{item.price}}</div>
    </div>
</div>

标签： vuejs2

解决方案

<a :href="href">正在访问一个未定义的变量 (href)

使用<a :href="item.href">然后添加href到每个项目。

推荐阅读