ShowEasyFrontEnd/FrontEnd/components/newComponent/like/like.vue

<template>
  <div class="tw-cursor-pointer like">
    <div v-if="childLiked" @click="removeServiceRelation">
      <img
        class="tw-w-[20px] tw-h-[18px] md:tw-w-[33px] md:tw-h-[30px]"
        src="~/assets/svg/newHeart.svg"
        alt=""
      />
    </div>
    <div v-else @click="buildServiceRelation">
      <img
        class="tw-w-[20px] tw-h-[18px] md:tw-w-[33px] md:tw-h-[30px]"
        src="~/assets/svg/newHeartOutline.svg"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    like: {
      type: Boolean,
      default: false,
    },
    serviceId: {
      type: String,
      default: "",
    },
    isForUserprofile: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      childLiked: false,
    };
  },
  methods: {
    removeServiceRelation() {
      // if (this.$auth.loggedIn) {
      //   this.$axios
      //     .delete(
      //       `member/services/${this.serviceId}?jwt=${
      //         this.$auth.$storage.getUniversal("jwt").token
      //       }`
      //     )
      //     .then((result) => {
      //       this.$emit("remove-relation");
      //       this.$nextTick(() => {
      //         this.childLiked = false;
      //       });
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // } else {
      //   this.$router.push(this.localePath("/user"));
      // }
    },
    buildServiceRelation() {
      // if (this.$auth.loggedIn) {
      //   this.$axios
      //     .patch(
      //       `member/services/${this.serviceId}?jwt=${
      //         this.$auth.$storage.getUniversal("jwt").token
      //       }`
      //     )
      //     .then((result) => {
      //       this.childLiked = true;
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // } else {
      //   this.$router.push(this.localePath("/user"));
      // }
    },
  },
  mounted() {
    this.like ? (this.childLiked = true) : (this.childLiked = false);
  },
  updated() {
    this.isForUserprofile ? (this.childLiked = true) : this.childLiked;
  },
};
</script>
<style lang="scss" scoped></style>