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>

很难从Laravel集合中获取Vuejs中的关联表记录

1 个答案: