samedi 2 avril 2016

Vuejs ajax GET request not returning data in Laravel 5.1 Blade template

am trying to retrieve data from a database using vuejs ajax call with a plugin called vue-resource. Unfortunately, the json data object contains the html page and not the actual data from the database. Can someone please tell me what am doing wrong? This is my code:

routes.php

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

fruitsctrl.php (controller)

<?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 (model)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

fruitshome.blade.php (view)

<head>
        <meta id="token" content="{{ csrf_token() }}">
</head>
<body>
    <div class="row" id="vapp">
        <ul>
            <li v-for="fruits in fruit">
                @{{ 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.fetchEvents();
    },
    data : {
        fruit : {id:'', name:'', type:''},
        events : []
    },
    methods : {
        fetchEvents : function(){
            this.$http.get('/').then(function(res){
                this.events = res;
            },function (data){
                console.log(error ...);
            });
        }
    }
});



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire