Let's add ability to delete a tweet. Open the Tweet component and update the date div as below:

// src/components/Tweet/Tweet.vue
<div class="date">
    {{ tweet.created_at | timeAgo }}
    <small v-if="canDeleteTweet">
        <a @click="deleteTweet(tweet.id)">Delete Tweet</a>
    </small>
</div>

We add a link to delete a tweet. But first, we check to make sure the user can actually delete the tweet (that is, the user is the owner of the tweet) using a canDeleteTweet computed property.

Next, add these to the JavaScript section:

Table of Contents

    // src/components/Tweet/Tweet.vue
    
    computed: {
        canDeleteTweet () {
            return this.tweet.user_id === this.authUser.id
        }
    },
    methods: {
        deleteTweet (tweetId) {
            const token = localStorage.getItem('tweetr-token')
            const deleteConfirmed = confirm('Are you sure?')
    
            if (deleteConfirmed) {
                axios
                    .delete(`/tweets/destroy/${tweetId}`, {
                        headers: {
                            Authorization: `Bearer ${token}`
                        }
                    })
                    .then(response => {
                        this.$emit('delete', tweetId)
                    })
            }
        }
    }

    The canDeleteTweet computed property checks if the user_id on the tweet is same as the ID of the authenticated user, hence the user can delete the tweet. Once the link is clicked, a deleteTweet method is called. This method takes the ID of the tweet to be deleted and makes DELETE request to /tweets/destroy/:id endpoint of our API. Where :id is the ID of the tweet the user want to delete. On success, we fire a delete event passing along the tweet ID.

    As you have rightly guessed, we need to listen for the delete event fired and update the list of tweets accordingly. We'll use Vue's v-on directive to listen for the event. Open src/components/Tweet/Tweets.vue and update the Tweet component as below:

    // src/components/Tweet/Tweets.vue
    
    <Tweet
        v-for="tweet in tweets"
        :key="tweet.id"
        :tweet="tweet"
        :auth-user="authUser"
        v-on:delete="removeDeletedTweet"
    />

    v-on:delete will listen for the delete event fired then call a removeDeletedTweet method. In other words, when an delete event is fired, a removeDeletedTweet method will be called.

    Next, add the code to the methods object of the JavaScript:

    // src/components/Tweet/Tweets.vue
    
    removeDeletedTweet (tweetId) {
        const filteredTweets = this.tweets.filter(tweet => {
            return tweet.id !== tweetId
        })
    
        this.$emit('update:tweets', filteredTweets)
    }

    This method accepts the tweet ID passed along when the event was fired. Using the tweet ID, we filter the tweets array by removing the tweet with this ID from the list of tweets. Lastly, we fire another event to update the tweets wherever it is been displayed. Recall, we did :tweets.sync when we render the Tweets component.

    Users should now be able to delete their tweets:

    Chimezie Enyinnaya

    20 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com