A Beginner’s Guide To Nuxt 3/

...

/

Deleting Data

Deleting Data

Learn how to delete posts from our project.

We'll cover the following...

Deleting data

Along with passing setData the value of undefined, we can also remove data with the removeItem method:

Press + to interact
await useStorage().removeItem("cache:posts");

This can remove any set of data based on the key we enter. It will remove the full set of data, but for our project, we only want to remove a single post at a time. This can be achieved by a similar process to the one we used for updating posts:

  1. In the admin page, add a “delete" button or icon next to each post.

  2. When this is clicked, call a function to perform a delete request.

  3. Retrieve our existing posts from the store.

  4. Remove the selected post to delete.

  5. Update the storage and return the new posts.

In the admin.vue file, we first need to add an icon to click next to each post:

Press + to interact
	<!-- ... -->
	<ul>
		<li
			v-for="post in allPosts?.posts"
			:key="post.id"
			:style="{
				background: post.featured ? '#f9b433' : '#3a3744',
			}"
		>
			<p class="delete" @click="handleDeletePost(post.id)">&times;</p>
			<h3>{{ post.title }}</h3>
			<p>{{ post.body.slice(0, 200) }}</p>
		</li>
	</ul>
</template>
    ...