Vuejs ajax GET请求未在Laravel 5.1 Blade模板中返回数据答案

【问题标题】：Vuejs ajax GET request not returning data in Laravel 5.1 Blade templateVuejs ajax GET请求未在Laravel 5.1 Blade模板中返回数据
【发布时间】：2016-07-22 13:48:03
【问题描述】：

我正在尝试使用vuejs ajax 调用和名为vue-resource 的插件从数据库中检索数据。不幸的是，json 数据对象包含 html 页面，而不是数据库中的实际数据。有人可以告诉我做错了什么吗？这是我的代码：

routes.php

    <?php
Route::get('find', 'FruitsCtrl@index');

fruitsctrl.php（控制器）

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Fruit;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class FruitsCtrl extends Controller
{
    public function index(Request $req){
        $fruits = Fruit::all();
        return view('fruitsHome', $fruits);
    }
}

fruit.php（模型）

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Fruit extends Model
{
    protected $fillable = [
            'id', 'name', 'type'
    ];
}

fruitshome.blade.php（查看）

<head>
        <meta id="token" content="{{ csrf_token() }}">
</head>
<body>
    <div class="row" id="vapp">
        <ul>
            <li v-for="fruit in fruits">
                @{{ fruit.name }}
                @{{ fruit.type }}

            </li>
        </ul>
    </div>
<body>

app.js (javascript)

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
var v = new Vue({
    el : "#vapp",
    ready :function () {
        this.fetchFruits();
    },
    data : {
        fruit : {id:'', name:'', type:''},
        fruits : []
    },
    methods : {
        fetchFruits : function(){
            this.$http.get('/find').then(function(res){
                this.fruits = res;
            },function (data){
                console.log(error ...);
            });
        }
    }
});

【问题讨论】：

标签： javascript laravel laravel-5 vue.js vue-resource

【解决方案1】：

您当前正在从控制器返回一个视图：

class FruitsCtrl extends Controller
{
    public function index(Request $req){
        $fruits = Fruit::all();
        return view('fruitsHome', $fruits);
    }
}

相反，您可以直接返回 Eloquent 结果并将它们输出为 JSON：

class FruitsCtrl extends Controller
{
    public function index(Request $req){
        $fruits = Fruit::all();
        return $fruits;
    }
}

【讨论】：

【解决方案2】：

我认为您需要像这样在模型中设置表名：

class Fruit extends Model
{

   protected $table = 'fruits';
   protected $fillable = [
        'id', 'name', 'type'
   ];
}

您还需要像这样更新索引方法：

public function index(Request $req){
    $fruits = Fruit::all();
    return view('fruitsHome')->withFruits($fruits);
}

最后更新刀片：

       <li v-for="fruits in fruit">
            @{!! $fruits->name !!}
            @{!! $fruits->type !!}

        </li>

如果对你有帮助，请告诉我

【讨论】：

感谢您的回复。我已经尝试过你的建议，但它不起作用。我在Illuminate\View\View.php 中收到错误异常。错误是非法偏移类型...