Difficult to get associate table's record in Vuejs from Laravel collection

Question

I'm using Vuejs and Laravel building a live feed app, but i found that it is difficult to get associate data from collection in Vuejs, is there anyway to get those data easily?

Here is my attempt:

<div class="sl-item" v-for="post, index in posts">
      <a href="javascript:void(0)">
        <div class="sl-content">
          {{post}}
          <br>
          ------------------------
          <br>
          {{getUser(post.user_id)}}
        </div>
      </a>
    </div>

Here is my methods that i intend to retrieve user record:

methods: {
    getUser (id)
    {
      return axios.get("/user/getUser/" + id)
      .then(response => {
        console.log(response.data);
        return response.data;
      });
    }
  },

But this is what i got:

I can log what i get in console, but i can't display or access the thing i return from my method.

Is there any other easier way to achieve this?

Emtiaz Zahid · Accepted Answer · 2018-11-18 06:30:48Z

You fetching all the data from collection. that's why you also getting unwanted data in your object

in your current situation (without changing in your controller script) you can access those data as like:

public function index(Request $request)
{
    if ($request->ajax()) {
        return Post::with(['user' => function($query){
           $query->select(['id', 'name'])
        }])
            ->select(['id', 'title', 'description'])
            ->get;
    }
}

if you do this in your controller, then in your vue file,

data:function(){
        return{
            posts: [],
        };
    },
methods: {
    getPosts ()
    {
      return axios.get("/posts")
      .then(response => {
        this.posts = response.data;
      });
    }
  },

and in component:

<div class="sl-item" v-for="post, index in posts">
      <a href="javascript:void(0)">
        <div class="sl-content">
          {{post.title}}
          <br>
          ------------------------
          <br>
          {{ post.user.name }}
        </div>
      </a>
    </div>

Collectives™ on Stack Overflow

Difficult to get associate table's record in Vuejs from Laravel collection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related