title: vuejs - How to pass variable to main js file and then iterate through?
body: <p>I'm working in Laravel. What I want to do is to get the posts from the server and show them in view, however before that I wanted to set static array containing sample posts but my problem is that I can't access posts variable in app.js file when passing by <code>data(){...}</code> and receiving by <code>props: ['posts']</code>. When I even <code>console.log(this.posts)</code> in app.js file it returns <code>undefined</code>. I'm confused what the problem is:</p>
  
  <p>My resources/js/app.js file:</p>
  
  <pre><code>window.Vue = require('vue');
  window.App = require('./App.vue');
  window.addEventListener('load', function ()
  {
      const app = new Vue({
          el: '#app',
          render: h =&gt; h(App)
      });
  });
  </code></pre>
  
  <p>My resources/js/App.vue file:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;app-head&gt;&lt;/app-head&gt;
          &lt;app-post v-for="post in posts" :key="post.id"&gt;&lt;/app-post&gt;
          &lt;app-foot&gt;&lt;/app-foot&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Head from './components/Head.vue';
      import Foot from './components/Foot.vue';
      import Post from './components/Post.vue';
  
      export default {
          props: ['posts'],
          components: {
              'app-head': Head,
              'app-post': Post,
              'app-foot': Foot,
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My resources/js/components/Post.vue file:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="post"&gt;
          // The post content...
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  posts: [
                      {id: 1, title: 'Hello :)'}
                  ]
              }
          }
      }
  &lt;/script&gt;
  </code></pre>