title: $http.get in Vue.js does not work when view is accessed from resource controller in Laravel
body: <p>I am facing a confusing JavaSript problem with Vue.js in a Laravel project: The same page works if I route to it directly from routes.php, but it does not if I use the resource controller.</p>
  
  <p>routes.php:</p>
  
  <pre><code>Route::resource('foo', 'FooController');
  
  get('foo_create', function () {
      return view('foo.create');  // works
  });
  
  get('foobar_to_fetch', function () {
      return App\Node::all();  // some json
  });
  </code></pre>
  
  <p>FooController.php:</p>
  
  <pre><code>class FooController extends Controller
  {
      public function create()
      {
          return view('foo.create');  // broken
      }
  }
  </code></pre>
  
  <p>views/foo/create.php:</p>
  
  <pre><code>&lt;div id="foo"&gt;
  
      &lt;table&gt;
          &lt;tr v-repeat="foobar"&gt;
              &lt;td&gt;{{ id }}&lt;/td&gt;
              &lt;td&gt;{{ name }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;pre&gt;{{ $data | json }}&lt;/pre&gt;
  
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://localhost/foo/resources/views/foo/create.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>views/foo/create.js:</p>
  
  <pre><code>new Vue({
  
      el: '#foo',
  
      data: {
          foobar: []
      },
  
      ready: function() {
          this.fetchFoobar();
      },
  
      methods: {
          fetchFoobar: function () {
              alert('no problem until here');
              this.$http.get('foobar_to_fetch', function (foobar_fetched) {
                  alert(foobar_fetched.length);
                  this.foobar = foobar_fetched;
              })
          }
      }
  
  });
  </code></pre>
  
  <p>If I go to <code>/foo_create</code> I see the two alerts and the table with the fetched data. If I go to <code>/foo/create</code> (which is of course what I want) I see only the first alert and nothing more.</p>
  
  <p>I found out that it works in both cases if I give <code>$http.get</code> the full path:</p>
  
  <pre><code>this.$http.get('http://localhost/foo/public/index.php/foobar_to_fetch', function (foobar_fetched) {
  </code></pre>
  
  <p>But how is it possible that the same page behaves differently, depending on how I got there?</p>
  
  <p>Where does <code>$http.get</code> look if it is told to look for <code>'foobar_to_fetch'</code> and the page is accessed as <code>/foo/create</code>? And is there a relative path that would work in this case?</p>