CODEWITHSUNDEEP
javascriptvue.js
NeoSoul
NeoSoul

Reputation: 122

How to reload the data in parent's page after deletion on component without refresh the actual page (Vue 2)?

So, I have a parent page which contains a component card. Inside the component card I have a delete button to delete the data based on that component Id. I use Axios to make delete request, but the problem is after I success make the deletion, that component won't disappear since the data on the client still not reloading.

I know I can reload the data by refreshing the page, but I don't wanna do that. Is there any way I can reload the data on the parent's page from component? Here's some snippets code:

Parent's page, this is where I put the component:

<div class="justify-center flex flex-row" v-for="(savedClass, index) in savedClasses" :key="index">
              <saved-class-card
              :courseId="savedClass.id"
              :title="savedClass.course.title"
              :author="savedClass.course.author"
              :slug="savedClass.course.slug"
              :cover="savedClass.course.cover.url"
              >
              </saved-class-card>
</div>

Then the component:

<template>
  <div class="w-full inline-block ptsans-font mt-3 font-pt-sans">
    <!-- delete button -->
        <div class="flex flex-row justify-end h-auto w-24 rounded-lg ml-6 px-4 py-1 cursor-pointer" @click="deleteSavedCourse">
          <div class="mr-1">
              <p>DELETE</p>
          </div>
          <div class="">
              <p>X</p>
          </div>
        </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/id";
import axios from "axios";

export default {
  name: "SavedClassCard",
  props: ["cover", "title", "author", "slug", "status", "courseId"],
  methods: {
    async deleteSavedCourse() {
        const request = `https:xxxxxxx-xxx/${this.courseId}`;
        const deleteRequest = await axios.delete(request);
        if (deleteRequest.status === 200) {
            console.log("data successfully deleted");
        } else {
            console.log(deleteRequest);
        }
    }
  },
  computed: {
    coverFull() {
      return `https:xxxxxxx-xxx${this.cover}`;
    }
  },
};
</script>

Upvotes: 0

Views: 282

Answers (1)

jkoch
jkoch

Reputation: 806

You could try to emit an event in your deleteSavedCourse method and listen to that event in your parent component.

methods: {
    async deleteSavedCourse() {
        const request = `https:xxxxxxx-xxx/${this.courseId}`;
        const deleteRequest = await axios.delete(request);
        if (deleteRequest.status === 200) {
            console.log("data successfully deleted");
            this.$emit('deleted');
        } else {
            console.log(deleteRequest);
        }
    }
  },

<div class="justify-center flex flex-row" v-for="(savedClass, index) in savedClasses" :key="index">
              <saved-class-card
              :courseId="savedClass.id"
              :title="savedClass.course.title"
              :author="savedClass.course.author"
              :slug="savedClass.course.slug"
              :cover="savedClass.course.cover.url"
              @deleted="handleReloadingOfData()"
              >
              </saved-class-card>
</div>

You can read more about custom events here

Upvotes: 1

Related Questions