1 year ago

Access Eloquent relationship in Vue.js

Posted 1 year ago by laxsmi

Hello everybody,

I'm trying to achieve something that seems pretty simple, but I must be missing something.

I have a list of items in the database. I want to display a list of all items with Vue.js

So I have set up an "Items" component to do this:

<table class="table">

  <tr v-for='item in items' v-bind:key=''>

    <td>{{ }}</td>

    <td>{{ item.price }} €</td>

    <td>{{ item.status }}</td>



and this components gets the list of items via an AJAX request when mounted:


     data() {
       return {
           items: {
               name: '',
               price: '',
               status: ''

     mounted() {

     methods: {
       getAllItems() {
           .then(response => {
             this.items =;


My controller is like this:

  public function getAllItems() {
    $items = Item::withTrashed()->with('status')->get();
    return response()->json([
      'items'    => $items
  ], 200);

and everything works fine, but the {{ item.status }} part. This is an Eloquent relationship defined in my model:

  public function status() {
      return $this->trashed();

and it works in PHP:

>>> $i = Item::find(12)->status();
=> false

but when called from Vue.js I get the following response with a 500 error: "Call to a member function addEagerConstraints() on boolean"

What I am doing wrong?

Please sign in or create an account to participate in this conversation.