laxsmi
136
3
Vue

Access Eloquent relationship in Vue.js

Posted 8 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:

<template>
<table class="table">

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

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

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

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

    <td>
  </tr>

</table>
</template>

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

<script>

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

     mounted() {
       this.getAllItems();
     },

     methods: {
       getAllItems() {
         axios.get('/admin/get/')
           .then(response => {
             this.items = response.data.items;
           });
       },
   }

</script>

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.

Reply to

Use Markdown with GitHub-flavored code blocks.