Laravel 5.3 with Vuejs ajax call

Question

Trying to get some data from database using Vuejs. There are some dummy data in my users table. I want to show them in my view. Problem is though the page loads, It cannot fetch the data from the users table. It does not give any console error. I have checked database connection, restarted server and also checked api data with postman. It's working fine.

Views:

layout.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
  </head>
  <body>

    <div class="container">
      @yield('content')
    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"></script>
    @yield('scripts')
  </body>
</html>

fetchUser.blade.php

@extends('layout')
@section('content')

<div id="UserController">

  <table class="table table-hover table-striped">
    <thead>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </thead>
    <tbody>
      <tr v-for="user in users">
          <td>@{{ user.id }}</td>
          <td>@{{ user.name }}</td>
          <td>@{{ user.email }}</td>
          <td>@{{ user.address }}</td>
          <td>@{{ user.created_at }}</td>
          <td>@{{ user.updated_at }}</td>
      </tr>
    </tbody>
  </table>

</div>

@endsection
@section('scripts')
<script src="{{ asset('js/script.js') }}" charset="utf-8"></script>
@endsection

script.js

var vm = new Vue({
    el: '#UserController',

    methods: {
      fetchUser: function(){
          this.$http.get('api/users', function(data) {
              this.$set('users', data )
          })
      }
    },

      ready: function(){

    }
});

web.php

Route::get('/', function () {
    return view('fetchUser');
});

api.php

<?php

use Illuminate\Http\Request;
use App\User;
Route::get('/users', function(){
    return User::all();
});

ABDEL-RHMAN · Accepted Answer · 2016-09-17 16:02:58Z

1

You should use then , and call the fetchUser in the ready function as well

 data:{
   users: []
 },

 methods:{
     fetchUser: function(){
          this.$http.get('api/users').then(function(response){
                this.$set('users', response.data);
          }, function(response){
              // error callback
          });
 },

 ready: function(){
        this.fetchUser();
        }

vue-resource docs

answered Sep 17, 2016 at 16:02

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel 5.3 with Vuejs ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related