尝试使用 Vuejs 从数据库中获取一些数据。我的用户表中有一些虚拟数据。我想在我的视野中展示它们。问题是虽然页面加载，但它无法从用户表中获取数据。它不会给出任何控制台错误。我检查了数据库连接，重新启动了服务器，还用邮递员检查了 api 数据。它工作正常。

浏览量：

layout.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 		<!DOCTYPE html >
<html >
  <head >
    <meta charset = “utf-8” >
   
    < link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” media = “screen” title = “no title” >
  </head >
  <body >

   
      @ yield ( ‘content’ )
   

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

fetchUser.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 		@ extends ( ‘layout’ )
@section ( ‘content’ )

  <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 >

@endsection
@section ( ‘scripts’ )
<script src = “{{ asset(‘js/script.js’) }}” charset = “utf-8” >
@endsection

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 		var vm = new Vue ( {
    el : ‘#UserController’ ,

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

      ready : function ( ) {

    }
} ) ;

web.php

1
2
3 		Route :: get ( ‘/’ , function ( ) {
    return view ( ‘fetchUser’ ) ;
} ) ;

api.php

1
2
3
4
5
6
7
8 		<?php

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

你应该使用 then ，并在 ready 函数中调用 fetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 		 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 资源文档

声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。