I am facing an issue with deleting playlists displayed on my page. These playlists are fetched from an external API and each playlist has a delete button which is supposed to remove the playlist both from the API and the view.
The deletion process works smoothly for the API, but I am struggling to update the view after deleting a playlist.
Among my components is "Playlists.vue", where I have the following code:
<div class="playlists" v-if="playlists">
<playlist v-for="playlist in playlists"
v-bind:key="playlist.id"
v-bind:playlist="playlist">
</playlist>
<span v-if="playlists.length === 0">No playlist found</span>
</div>
In the Playlists.vue file, a fetchData function fetches the data from the API like this:
methods: {
async fetchData() {
const playlists = await api.getAllPlaylists();
}
}
Another component, Playlist.vue, renders a single playlist as follows:
<div class="row">
<div class="col">
<textarea v-model="playlist.name" v-on:blur="updatePlaylist"></textarea>
<button v-on:click="deletePlaylist(playlist.id)">Delete</button>
</div>
</div>
To update the playlist after a delete operation, I tried re-calling the fetchData function after each delete by importing the Playlists.js component like this:
import playlists from './Playlists';
And then called the fetchData function within my delete function:
deletePlaylist(id) {
playlist.deletePlaylist(id);
playlists.fetchData();
},
However, I encountered the following error:
Uncaught TypeError: WEBPACK_IMPORTED_MODULE_2__Playlists.a.fetchData is not a function
I have explored other solutions but unable to find a way to call methods from Playlists.vue in Playlist.vue
Any suggestions for fixing this issue or perhaps a better solution?
Thank you!