Laravel 5.3與Vuejs ajax聯繫

嘗試使用Vuejs從數據庫獲取一些數據。我的用戶表中有一些虛擬數據。我想在我看來讓他們看。問題在於頁面加載時，它無法從用戶表中獲取數據。它不會給任何控制檯錯誤。我已檢查數據庫連接，重新啓動服務器，並檢查郵遞員與API數據。它工作正常。Laravel 5.3與Vuejs ajax聯繫

瀏覽：

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(); 
});

來源

2016-09-17 Noob Coder

您應該使用的話，並調用fetchUser就緒功能以及

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

來源

2016-09-17 16:02:58

謝謝你..是有很大幫助 –

Laravel 5.3與Vuejs ajax聯繫

回答

相關問題