Level 47
add a : before your property pass in blade
<FollowButton :user-id="{{ $user->id }}"></FollowButton>
Feb 16, 2023
14
Level 1
Vue FollowButton error
Can't get this code to work properly. Trying to get this vue button to work. Im using Laravel 9, Vite and Vue 3
error:
xhr.js:247 POST http://jotking.test/follow/undefined 404 (Not Found)
dispatchXhrRequest @ xhr.js:247
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:142
httpMethod @ Axios.js:181
wrap @ bind.js:5
followUser @ FollowButton.vue:20
_createElementVNode.onClick._cache.<computed>._cache.<computed> @ FollowButton.vue:3
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345
settle.js:19 Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
FollowButton.vue
<template>
<div>
<button class="btn" @click="followUser">Follow</button>
</div>
</template>
<script>
import axios from "axios";
export default {
mounted() {
console.log("Component mounted.");
},
props: ["userId"],
methods: {
followUser() {
// axios.post("/follow/1") <-- this registers
axios.post("/follow/" + this.userId) <-- this gives me error
.then((response) => {
console.log(response.data);
});
},
},
};
</script>
index.blade.php
<FollowButton user-id="{{ $user->id }}"></FollowButton>
</div>
FollowsController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class FollowsController extends Controller
{
public function store(User $user)
{
return auth()->user()->following()->toggle($user->profile);
// return $user->username;
}
}
Level 1
I tried that and still get an error.
{message: "No query results for model [App\Models\User] undefined",…}
exception
:
"Symfony\Component\HttpKernel\Exception\NotFoundHttpException"
file
:
"/Users/nes/Sites/jotking/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line
:
391
message
:
"No query results for model [App\Models\User] undefined"
trace
:
[{,…},…]
Level 47
@gesshoo This must be a backend proplem, check your controller or your model or your pivot table, It says no query results found , backend never return anything for frontend to process.
if it is ok , show some controller or table codes
Level 1
profile_user_pivot_table
public function up()
{
Schema::create('profile_user', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('profile_id');
$table->unsignedBigInteger('user_id');
$table->timestamps();
});
}
Profile.php
public function followers()
{
return $this->belongsToMany(User::class);
}
User.php
public function following()
{
return $this->belongsToMany(Profile::class);
}
web.php (route)
Route::post('follow/{user}', [FollowsController::class, 'store']);
js
//// FollowButton
import {createApp} from 'vue';
import FollowButton from './Components/FollowButton.vue';
const app = createApp(FollowButton);
app.mount('#FollowButtonApp');
Level 47
@gesshoo what's inside your controller?
Level 1
Controller.php
<?php
namespace App\Http\Controllers;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;
class Controller extends BaseController
{
use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
}
Level 47
@gesshoo No , in your FollowController
Level 1
@MaverickChan It's in the first post above.
Level 1
FollowsController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class FollowsController extends Controller
{
public function store(User $user)
{
return auth()->user()->following()->toggle($user->profile);
// return $user->username;
}
}
Level 47
@gesshoo remove return .
and the problem is , where do you get the user instance? At least you need to pass it to the vue component
Level 1
@MaverickChan Not sure what that means.
When I use this -> "axios.post("/follow/1")" , I get the following:
in Tinker
> $user->fresh()->following
= Illuminate\Database\Eloquent\Collection {#3940
all: [],
}
> $user->fresh()->following
= Illuminate\Database\Eloquent\Collection {#4910
all: [
App\Models\Profile {#4913
id: 2,
user_id: 2,
title: "newUser title",
description: "desc",
url: "http://richport100.com",
image: "profile/inWu3XGdNIdewQVjwcGd5C1oh4PHkZDKPD8vTJmx.jpg",
created_at: "2023-02-12 15:05:31",
updated_at: "2023-02-12 15:21:43",
pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4911
user_id: 2,
profile_id: 2,
},
},
],
}
When I use this -> "axios.post("/follow/" + this.userId)" I get the error. Sorry bro, total newb... Im following an old tutorial and I got stumped.
Level 47
@gesshoo my point is , you didn't pass the id to the vue component correctly.
your backend $user, does it work?
<FollowButton :user-id="{{ $user->id }}"></FollowButton>
this line.
console.log(userId) in vue mounted , check if the props passed.
and also , change your method to
axios.post(`/follow/${this.userId`})
please notice it is `, not single quote'
Level 1
@MaverickChan I appreciate the help, but I haven't figured it out yet. I'll keep trying.
Level 3
First of all, you must pass props with the : before the prop name, as @maverickchan suggested. Then, make sure the userId prop has the value you want, either showing it in the template in vue (with a {{ userId }} ) or showing it in the console/debugger.
Ultimately it should show the prop value, but the problem seems to be that you are passing an undefined value to the Vue component, so try debugging the endpoint that feeds the index.blade.php to make sure you are returning a correct value.
Please or to participate in this conversation.