laxsmi

Experience

8,910

0 Best Reply Awards

  • Member Since 4 Months Ago
  • 88 Lessons Completed
  • 9 Favorites

12th July, 2018

laxsmi left a reply on Access Eloquent Relationship In Vue.js • 1 week ago

Wonderful!

So I defined the accessor and I added an appends attribute to my model to get it through Vue.js:

protected $appends = ['status'];

Thank you for your help ouhare!

laxsmi left a reply on Access Eloquent Relationship In Vue.js • 1 week ago

Thank you ouhare for noticing this: I made the correction accordingly.

My initial problem persists, though...

laxsmi started a new conversation Access Eloquent Relationship In Vue.js • 1 week ago

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?

Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.