Laravel 5.3 with Vuejs ajax call尝试使用 Vuejs 从数据库中获取一些数据。我的用户表中有一些虚拟数据。我想在我的视野中展示它们。问题是虽然页面加载,但...
尝试使用 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 资源文档
沃梦达教程
本文标题为:关于php:Laravel 5.3 with Vuejs ajax call
猜你喜欢
- vue keep-alive 2023-10-08
- jsPlumb+vue创建字段映射关系 2023-10-08
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- layui数据表格以及传数据方式 2022-12-13
- ajax实现输入提示效果 2023-02-14
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- JS实现左侧菜单工具栏 2022-08-31
- 1 Vue - 简介 2023-10-08
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21