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>