V-for不遍历对象

Question

我有一个名为优惠的优惠券对象数组：

 [{ "coupon": 
             { "id": "1", "name": "Coupon 1" } 
  }, 
  { "coupon": 
             { "id": "2", "name": "Coupon 2" } 
  }]

我尝试像这样遍历槽：

<div v-for="(coupon, $index) in offers" :key="$index">
     <p>{{coupon.id}}</p>
</div>

问题在于div不迭代任何内容。

Answer 1

您必须穿过对象，“ First coupon”是元素名称，请尝试执行此操作。这应该工作

div v-for="(coupon, $index) in offers" :key="$index">
    <p>{{coupon.coupon.id}}</p> 
</div>

Answer 2

<div v-for="{ coupon } in offers" :key="coupon.id">
   <p>{{ coupon.name }}</p>
</div>

不要将索引用作键