Entonces, tengo una página principal que contiene una tarjeta de componentes. Dentro de la tarjeta de componentes, tengo un botón de eliminación para eliminar los datos según la identificación de ese componente. Utilizo Axios para realizar una solicitud de eliminación, pero el problema es que después de realizar la eliminación con éxito, ese componente no desaparecerá ya que los datos en el cliente aún no se recargan.

Sé que puedo recargar los datos actualizando la página, pero no quiero hacer eso. ¿Hay alguna forma de que pueda volver a cargar los datos en la página de los padres desde el componente? Aquí hay algunos fragmentos de código:

Página de padres, aquí es donde pongo el componente:

 <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>

Entonces el componente:

 <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>