0

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

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

水果.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>

应用程序.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 ...);
            });
        }
    }
});
4

2 回答 2

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;
    }
}
于 2016-06-29T21:18:45.867 回答
0

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

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>

让我知道它是否对您有帮助

于 2016-04-02T21:14:55.267 回答