title: How to fetch data with relationship using VueJs + Laravel
body: <p>How can I show the user name in my table using vuejs ?</p>
  
  <p>I have my users and posts table with the relationships set. A user has many posts and a post belongs to a user.</p>
  
  <p>In my Posts.vue template I can now show the post table data:</p>
  
  <pre><code>&lt;tr v-for="post in posts"&gt;
      &lt;td&gt;{{ post.id }}&lt;/td&gt;
      &lt;td&gt;{{ post.title }}&lt;/td&gt;
      &lt;td&gt;{{ post.body | snippet }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>A script looks like this:</p>
  
  <pre><code>&lt;script&gt;
      export default {
          data(){
              return{
                  posts: []
              }
          },
  
          methods: {
              showPosts(){
                  axios.get('/app/posts').then(response =&gt; {
                      this.posts = response.data.posts;
                  });
              }
          },
         mounted(){
              this.showPosts();
         }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My PostController looks like this in the index function</p>
  
  <pre><code> public function index()
   {
      //
      $posts = Post::all();
      return response()-&gt;json([
          'posts' =&gt; $posts,
      ], 200);
   }
  </code></pre>
  
  <p>Since I have the user_id in the posts table,
  How can I show the user name in my table using vuejs ?</p>