<v-row gutter="20">
<v-col v-for="(item,index) in lists" :key="index" cols="6" sm="6" md="4" >
<div class="grid-hbiCard" :data-num="index">
<div class="hbiCard aos-init aos-animate" data-aos="flip-left" data-aos-delay="300">
<div class="hbiCard-box">
<div class="hbiCard-photo" :style="{ 'background-image': 'url(' + item.pic + ')' }">
<div class="bar-bg"></div><div class="bar-bg"></div><div class="bar-bg"></div><div class="bar-bg"></div>
</div>
<label class="hb-label">Purchasing!</label>
<div class="hb-heart" @click="collect(index)">
<img v-if="!item.isCollect" src="@/assets/images/favoroff.png">
<img v-if="item.isCollect" src="@/assets/images/favoron.png">
</div>
<button class="btn btn-hbi">
<span>Place a bid </span><img src="@/assets/images/page4/bidIcon.svg" >
</button>
</div>
<div class="hotBidDecription">
<div class="hbdLeft">
<h3>Amazing digital art</h3>
<span class="lfpcPrice">2.45 ETH</span>
</div>
<div class="hbdRight">
<div class="hbdRight-tt"><span class="label">Highest bid</span> 0.001ETH</div>
<div class="stock">3 in stock</div>
</div>
</div>
</div>
</div>
</v-col>
</v-row>
lists: [{
pic: require('../assets/images/page5/Card1.jpg'),
isCollect: false,
}, {
pic: require('../assets/images/page5/Card2.jpg'),
isCollect: false,
}, {
pic: require('../assets/images/page5/Card3.jpg'),
isCollect: false,
}, {
pic: require('../assets/images/page5/Card4.jpg'),
isCollect: false,
}, {
pic: require('../assets/images/page5/Card5.jpg'),
isCollect: false,
}, {
pic: require('../assets/images/page5/Card6.jpg'),
isCollect: false,
},],
collect(index) {
var isCollect = this.lists[index].isCollect;
this.lists[index].isCollect = isCollect === true ? false : true;
},