Using Vue 2.0 and Laravel 5.4, I am working on creating a matching system that includes a dynamic Vue component. For example, when someone likes another person, it should immediately show that the like has been sent or if the like is mutual, it should indicate that there is a match.
However, I'm facing an issue where the component keeps loading and in the developer tools, it shows an internal server error (500) along with an Uncaught (in promise) error. Additionally, in the network tab, there is a BadMethodCallException - Call to undefined method Illuminate\Database\Query\Builder::matches_with()
I have included the component in my app.js file as follows: Vue.component('match', require('./components/Match.vue'));
Vue File:
<template>
<div>
<p class="text-center" v-if="loading">
Loading...
</p>
<p class="text-center" v-if="!loading">
<a v-if="status == 0" @click="like_user">
<span title="I like you" class="send-heart"></span>
</a>
<a href=""><span title="I like you too" class="pending" v-if="status == 'pending'" @click="mutual_like">accept</span></a>
<a href="">
<span title="You like this person" class="pending" v-if="status == 'waiting'"></span>
</a>
<span v-if="status == 'match'" title="Chat" class="chat"></span>
</a>
</p>
</div>
</template>
<script>
export default {
mounted() {
this.$http.get('/check_match_status/' + this.profile_user_id)
.then((resp) => {
console.log(resp)
this.status = resp.body.status
this.loading = false
})
},
props: ['profile_user_id'],
data() {
return {
status: '',
loading: true
}
},
methods: {
like_user() {
this.loading = true
this.$http.get('/like_user/' + this.profile_user_id)
.then((r) => {
if (r.body == 1)
this.status = 'waiting'
this.loading = false
})
},
mutual_like() {
this.loading = true
this.$http.get('/mutual_like/' + this.profile_user_id)
.then((r) => {
if (r.body == 1)
this.status = 'match'
this.loading = false
})
}
}
}
</script>
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use App\Profile;
use Illuminate\Support\Facades\Event;
use App\User;
use App\Matches;
use App\Traits\Matchable;
use DB;
class MatchesController extends Controller
{
use Matchable;
public function check($id){
if (Auth::user()->matches_with($id) === 1)
{
return [ "status" => "match" ];
}
if(Auth::user()->has_pending_like_request_from($id))
{
return [ "status" => "pending" ];
}
if(Auth::user()->has_pending_like_request_sent_to($id))
{
return [ "status" => "waiting" ];
}
return [ "status" => 0 ];
}
...
}
Trait:
use App\Matches;
trait Matchable {
public function like_user($recipient_id)
{
// Logic for liking a user
}
public function mutual_like($sender_id)
{
// Logic for mutual liking between users
}
...
}
Model:
namespace App;
use Illuminate\Database\Eloquent\Model;
class Matches extends Model
{
protected $fillable = ['sender_id', 'recipient_id', 'status',];
}