当从Laravel中的资源控制器访问视图时，Vue.js中的$http.get不起作用

$http.get in Vue.js does not work when view is accessed from resource controller in Laravel

本文关键字：中的 js Vue http 不起作用 get Laravel 资源 控制器 视图 访问      更新时间：2023-09-26

在Laravel项目中，Vue.js面临着一个令人困惑的JavaSript问题：如果我直接从routes.php路由到同一页面，则该页面可以工作，但如果我使用资源控制器，则无法工作。

routes.php:

Route::resource('foo', 'FooController');
get('foo_create', function () {
    return view('foo.create');  // works
});
get('foobar_to_fetch', function () {
    return App'Node::all();  // some json
});

FooController.php：

class FooController extends Controller
{
    public function create()
    {
        return view('foo.create');  // broken
    }
}

views/foo/create.php：

<div id="foo">
    <table>
        <tr v-repeat="foobar">
            <td>{{ id }}</td>
            <td>{{ name }}</td>
        </tr>
    </table>
    <pre>{{ $data | json }}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="http://localhost/foo/resources/views/foo/create.js"></script>

views/foo/create.js:

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;
            })
        }
    }
});

如果我转到/foo_create，我会看到两个警报和带有提取数据的表。如果我转到/foo/create（这当然是我想要的），我只看到第一个警报，什么也看不到。

我发现，如果我给$http.get完整的路径：，它在这两种情况下都有效

this.$http.get('http://localhost/foo/public/index.php/foobar_to_fetch', function (foobar_fetched) {

但是，同一个页面的行为怎么可能不同，这取决于我是如何到达那里的？

如果$http.get被告知查找'foobar_to_fetch'，并且该页面被访问为/foo/create，那么它将查找哪里？在这种情况下，有没有一条相对的路径可以起作用？

尝试：

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;
            })
        }
    }

根据您触发该get请求的位置，它将更改url，因为'foobar_to_fetch'是相对url，而'/foobar_to_fetch'与域名相比是绝对的。

您还可以通过打开网络控制台（在Chrome上）并查看Ajax请求发送的标头来检测这一点。

相关文章：