<template>
? <div v-if="foodMeishi">
? ? <div
? ? ? class="food-box-content"
? ? ? v-for="(item, index) in foodMeishi"
? ? ? :key="item.id"
? ? >
? ? ? <img class="food-photo" :src="item.foodphotoUrl" alt="" />
? ? ? <div class="head">
? ? ? ? <img :src="item.headImg" alt="" />
? ? ? ? <p class="head-name">{{ item.headName }}</p>
? ? ? </div>
? ? ? <div class="food-content">
? ? ? ? {{ item.content }}
? ? ? </div>
? ? ? <div class="food-bottom">
? ? ? ? <div class="xin" @click="dianzan(index, item.id)">
? ? ? ? ? <i class="iconfont " v-if="item.xin">&#xe607;</i>
? ? ? ? ? <i class="iconfont" v-else>&#xe68b;</i>
? ? ? ? ? <span>{{ item.dianzan }}</span>
? ? ? ? </div>
? ? ? ? <div class="pinglun">
? ? ? ? ? <i class="iconfont">&#xe603;</i>
? ? ? ? ? <span>{{ item.pinglun }}</span>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? props: ["foodMeishi"],
? data() {
? ? return {
? ? ? zanListId: [1, 2],
? ? };
? },
? methods: {
? ? dianzan(index, id) {
? ? ? let list = this.zanListId;
? ? ? if (list.indexOf(id) == -1) {
? ? ? ? // 沒(méi)找到
? ? ? ? // 執(zhí)行點(diǎn)贊功能
? ? ? ? this.foodMeishi[index].dianzan += 1;
? ? ? ? // 加到數(shù)組中
? ? ? ? this.zanListId.push(id);
? ? ? ? this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
? ? ? } else {
? ? ? ? // 取消點(diǎn)贊
? ? ? ? this.foodMeishi[index].dianzan -= 1;
? ? ? ? this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
? ? ? ? for (var i in this.zanListId) {
? ? ? ? ? if (this.zanListId[i] == id) {
? ? ? ? ? ? this.zanListId.splice(i, 1);
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? },
? },
};
</script>