Noob Coder Noob Coder - 2 months ago 226
PHP Question

laravel 5.3 with vuejs ajax call

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. Its working fine. please help me. Here is the code.
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();
});

Answer

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

Comments