Laravel / AJAX Like Button Error: Request failed with status code 404 - ajax

Question

I'm very new to Laravel, AJAX etc. I am a student working on a Twitter type project and this is my first stack question ever made. I've tried to look for answers but the code that my teacher has helped me with is very different from other examples. I'm pretty sure that my problem is with the unlike method inside of my "Tweet Controller"... Any help is greatly appreciated! Hopefully I have provided enough information and hopefully this can help others in the future :)
This is my error:[1]: https://i.stack.imgur.com/zkxsd.png
POST http://localhost:8000/tweets/19/unlike 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (app.js:14253)
at settle (app.js:35706)
at XMLHttpRequest.handleLoad (app.js:14127)
This is my likes table / migration
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateLikesTable extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('likes', function (Blueprint $table) {
$table->increments('id');
$table->integer('tweet_id');
$table->integer('user_id');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('likes');
}
}
This is my Tweet Controller
public function like($id){
$like = Like::create([
'user_id'=>auth()->id(),
'tweet_id'=> $id
]);
if($like){
return json_encode(array('status' => 'success'));
}
return json_encode(array('status' => 'failed'));
}
public function unlike($id){
$like = Like::delete([
'user_id'=>auth()->id(),
'tweet_id'=> $id
]);
if($like){
return json_encode(array('status' => 'success'));
}
}
This is my Web Routes
Route::post('tweets/{tweet}/like', 'TweetController#like');
Route::delete('tweets/{tweet}/like', 'TweetController#unlike');
This is my Model
public function likes(){
return $this->hasMany(Like::class);
}
public function likedByCurrentUser(){
$userId=auth()->id();
//like boolean
$like = $this->likes->first(function($v) use ($userId){
//$v is a reference to the single like
return $v->user_id == $userId;
});
//if the user has liked a post
if($like){
return true;
}
return false;
}
This is my Vue Component:
<script>
export default {
name: 'likeButton',
props: ['likeCount','hasLiked','tweetId','csrf'],
mounted(){
this.dataLikeCount = this.likeCount;
this.dataHasLiked = this.hasLiked;
},
data(){
return{
dataLikeCount:0,
dataHasLiked:false
}
},
methods:{
doLike(){
var type='like';
if(this.dataHasLiked){
type='unlike'
}
axios({
method:'POST',
url:'/tweets/' + this.tweetId + '/'+ type,
headers:{
'X-CSRFToken':this.csrf
},
json: true
}).then((response) => {
if(response.data.status == 'success'){
// response was successful (regardless of type)
return true
// if type is like
// add one to like count, set hasLiked to true
if(type == 'like'){
this.dataLikeCount++
}
// if type is unlike
// deduct one from like count, set hasLiked to false
if(type =='unlike'){
return false
this.dataLikeCount--
}
}
});
}
}
}
</script>
<template>
<div>
<button type="submit"
:class="{'btn btn-link':dataHasLiked}"
#click="doLike">
<i class="star"></i>
Like {{ dataLikeCount }}
</button>
</div>
</template>

Answer 1

You dont have a matching route for unlike.
Change
Route::delete('tweets/{tweet}/like', 'TweetController#unlike');
To
Route::delete('tweets/{tweet}/unlike', 'TweetController#unlike');

Answer 2

Use this
Route::delete('tweets/{tweet}/unlike', 'TweetController#unlike');

Answer 3

As said by #DigitalDrifter you doesn't have route for unlike. so need to change that.
Your routes is like
Route::delete('tweets/{tweet}/unlike', 'TweetController#unlike');
So have to call this route with DELETE method using ajax. you have ajax call with post method.it will also give method not allowed error.
So change your web route,
From
Route::delete('tweets/{tweet}/unlike', 'TweetController#unlike');
To
Route::post('tweets/{tweet}/unlike', 'TweetController#unlike');
And change return response in your controller methods, It will look like below
Tweet Controller
public function like($id){
$like = Like::create([
'user_id'=>auth()->id(),
'tweet_id'=> $id
]);
if($like){
return response()->json(['status' => 'success']);
}
return response()->json(['status' => 'failed']);
}
public function unlike($id){
$like = Like::delete([
'user_id'=>auth()->id(),
'tweet_id'=> $id
]);
if($like){
return response()->json(['status' => 'success']);
}
}
Hope it helps now!!