Сложно получить запись ассоциированной таблицы в Vuejs из коллекции Laravel

Question

Я использую Vuejs и Laravel для создания приложения для прямой трансляции, но я обнаружил, что сложно получить связанные данные из коллекции в Vuejs, есть ли способ получить эти данные легко?

Вот моя попытка:

<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>

Вот мои методы, которые я собираюсь получить для записи пользователя:

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

Но вот что я получил:

Я могу регистрировать то, что я получаю в консоли, но я не могу отобразить или получить доступ к тому, что я возвращаю из моего метода.

Есть ли еще какой-нибудь более простой способ добиться этого?

Answer 1

Вы выбираете все данные из коллекции. вот почему вы также получаете нежелательные данные в вашем объекте

в вашей текущей ситуации (без изменений в скрипте контроллера) вы можете получить доступ к этим данным как:

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

если вы делаете это в вашем контроллере, то в вашем файле vue,

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

и в компоненте:

<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>