Vue.js ajax GET請求未在Laravel 5.1 Blade模板中返回數據

Question

我正在嘗試通過vuejs ajax調用和名為vue-resource的插件從數據庫中檢索數據。 不幸的是，json數據對象包含html頁面，而不包含數據庫中的實際數據。 有人可以告訴我做錯了什么嗎？ 這是我的代碼：

routes.php

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

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

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

Answer 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>

讓我知道是否對您有幫助

Vue.js ajax GET請求未在Laravel 5.1 Blade模板中返回數據

問題描述

2 個解決方案

解決方案1
1 2016-06-29 21:18:45

解決方案2
0 2016-04-02 21:14:55

Vue.js ajax GET請求未在Laravel 5.1 Blade模板中返回數據

問題描述

2 個解決方案

解決方案1 1 2016-06-29 21:18:45

解決方案2 0 2016-04-02 21:14:55

解決方案1
1 2016-06-29 21:18:45

解決方案2
0 2016-04-02 21:14:55