title: I want to Pass PHP array to vue js file from blade format html
body: <p>i'm working on laravel framework using google map api with vue.js and facebook's graph api with php. i need to get an array of longitude and latitude of that places coming from facebook's graph api to show them on google map api. The array of places is coming from a function of php class and graph is forming up in vue.js file, and Now i'm facing a problem that how can i get the php array in vue.js so that i would be able to show them(places) on map.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
  
   el: '#app',
   mounted(){
      var self = this;
      this.$on('google.maps:init', function(){
        self.createMap()
       });
     },
    data:{
      lat : ''
    },
   methods: {
     facebookCheckins : function(){
           var map= new google.maps.Map(document.querySelector('#map'),{
           center: {lat: 35, lng: -85},
            zoom:12
          });
          for (var i = lat.length - 1; i &gt;= 0; i--) {
             
         var marker = new google.maps.Marker({
           position: {lat: lat[i]['latitude'] , lng: lat[i]['longitude']},
           map: map,
           title:place['name']
         });
          }
       }
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
   &lt;h5&gt;&lt;?php echo $lat ?&gt;&lt;/h5&gt;
   &lt;form @submit.prevent="facebookCheckins"&gt;
    &lt;!-- **here i'm passing that array in js file** --&gt;
    &lt;input type="hidden" id="lat" v-model="{{$lat}}" name="lat_lng"&gt;
    &lt;button type="submit"&gt;Locate&lt;/button&gt;
   &lt;/form&gt;
   
     &lt;div id="map"&gt;&lt;/div&gt;
   &lt;/div&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"&gt;&lt;/script&gt;
   &lt;script src="{{asset('js/facebook.js')}}"&gt;&lt;/script&gt;
  
   &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdMD2WB2pMdBsWQqC7LOckwBywgWAd_WM&amp;callback=app.facebookCheckins()" async defer&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And in Controller </p>
  
  <pre><code>  // making object of class where facebook graph api code is written
          $obj=new App\Place();
          $results=$obj-&gt;searchPlaces(31.55,74.375);
          $resultsize=count($results);
          for ($i=0; $i &lt;$resultsize; $i++) { 
       // function in which longitude and latitude is find out
              $place=$obj-&gt;placesInfo($results[$i]['id']);
              $latitude=$place['location']['latitude'];
              $longitude=$place['location']['longitude'];
              $lat_lng[$i]= array('latitude' =&gt;$latitude ,'longitude'=&gt;$longitude );  
              $lat=json_encode($lat_lng);
          }
  
      return view('facebook_place_search')-&gt;withLat($lat);
  </code></pre>