<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;
},