Access Eloquent relationship in Vue.js

Posted 5 months 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up


Reply to

Use Markdown with GitHub-flavored code blocks.