vuejs怎么ajax传递数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs怎么ajax传递数据相关的知识，希望对你有一定的参考价值。
参考技术A vuejs没Ajax的api，所以要引入jquery或者zepto等库跟jquery不同的是它没有async选项，也就是说所有请求都是异步的本回答被提问者采纳 参考技术B vue中需要引入其他库使用ajax请求：
vue-resource 官网已停止维护
axios 使用Promise API
xe-ajax 使用Promise API，支持Mock
jquery 的 $.ajax 或者其他..
使用 vuejs 进行 ajax 调用
【中文标题】使用 vuejs 进行 ajax 调用【英文标题】：ajax call with vuejs 【发布时间】：2017-02-09 08:11:54 【问题描述】：我试图从传递对象的端点 api/data 获取数据。但是当我运行我的应用程序时，我在控制台和网络选项卡中看不到任何内容，我看不到任何 xhr 请求。控制台中也没有警告和错误。我在这里做错什么了吗？我已经正确检查了端点及其从后端传递的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FLashy</title>
<link rel="stylesheet" href="http://localhost:8000/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" id="app">
<h3 class="Text center">Datas</h3>
<p>
@ datas
</p>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://localhost:8000/js/jquery-2.2.4.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue-resource.min.js" charset="utf-8"></script>
<script type="text/javascript">
new Vue(
el: '#app',
data:
,
methods:
fetchData: function()
this.$http.get('api/data').then(function(response)
// this.$set('datas', response.data);
console.log(response);
, function(response)
// error callback
);
,
ready: function()
this.fetchData();
);
</script>
</body>
</html>
web.php
Route::get('api/data', function()
$a = [];
$a['id'] = 1;
$a['message'] = 'Lorem ipsum dolor sit amet, consectetur';
$a['status'] = 'Completed';
return response()->json($a,200);
);
【问题讨论】：
【参考方案1】：您的 ready 钩子在 methods: 处理程序内部，但实际上应该在外部：
methods:
fetchData: function ()
// your AJAX here
,
ready: function ()
this.fetchData()
【讨论】：
以上是关于vuejs怎么ajax传递数据的主要内容，如果未能解决你的问题，请参考以下文章