【发布时间】：2016-11-09 11:30:33
【问题描述】：
在研究 Vue.js 以及它如何与 laravel 交互几天后，我遇到了困难，我开始怀疑两件事：一是我的知识还不够好，无法继续我的愿望增强我们的一两个用户体验：不可能做我想做的事情，所以希望有更多知识的人可以帮助我克服我的障碍。
请原谅我相当基本的模型！
就 jquery / Ajax 而言，一切正常，但是我已经尝试转移到 vue.js，而那时事情运行并不顺利。
我的 Ajax 请求工作正常，但是当我使用 this.$set 或 this.$http 作为 get 或 post 请求时，我会收到以下消息：
11:14:28.690 TypeError: this.$http is undefined 1 vue:61:21
window.onload/queryAPI http://me.dev/vue:61:21
window.onload/ajaxVm<.methods.callAjax http://me.dev/vue:55:29
n http://me.dev/newjs/vue.js:6:836
G/< http://me.dev/newjs/vue.js:6:6272
11:24:21.000 TypeError: this.$set is not a function 1 vue:34:29
window.onload/queryAPI/<.success http://me.dev/vue:34:29
jQuery.Callbacks/fire http://code.jquery.com/jquery-3.1.1.js:3305:11
jQuery.Callbacks/self.fireWith http://code.jquery.com/jquery-3.1.1.js:3435:7
done http://code.jquery.com/jquery-3.1.1.js:9242:5
.send/callback/< http://code.jquery.com/jquery-3.1.1.js:9484:9
我的完整测试文档：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/newjs/vue.js"></script>
<title>VueJS</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var ajaxVm = new Vue({
el:'#test',
data:{
User:{
Name: 'John Doe'
},
datas: 'Hi'
},
methods:{
callAjax: function(e){
queryAPI();
}
}
});
var queryAPI = function(){
this.$http.post('/vue/ajax', this.formData).then(function(response) {
console.log(response);
}, function() {
console.log('failed');
})
}
}
</script>
</head>
<body>
<div id="test">
<label id="data">@{{datas}}</label>
<label>@{{User.Name}}</label>
<br/>
<button v-on:click="callAjax">
Call Ajax
</button>
</div>
</body>
</html>
并且使用 ajax/jquery 作为 this.$http 的一个姿势，除了 this.$set 之外它工作正常，因为我必须恢复使用 jquery 来更新元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/newjs/vue.js"></script>
<title>VueJS</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var ajaxVm = new Vue({
el:'#test',
data:{
User:{
Name: 'John Doe'
},
datas: 'Hi'
},
methods:{
callAjax: function(e){
queryAPI();
}
}
});
var queryAPI = function(){
$.ajax({
url: '/vue/ajax',
type: 'POST',
dataType: 'json',
data: ajaxVm.$data ,
success:function(data){
$('#data').html(data.Message);
console.log(data);
//this.$set('datas', data.Name)
},
error:function(xhr,text,exception){
console.error(exception);
}
})
}
}
</script>
</head>
<body>
<div id="test">
<label id="data">@{{datas}}</label>
<label>@{{User.Name}}</label>
<br/>
<button v-on:click="callAjax">
Call Ajax
</button>
</div>
</body>
</html>
我同时包含了 vue.js 2.0.5 和 vue-resource 1.0.3，我尝试使用带有 gulp 的 npm 到单个 .js 文件，我还尝试通过 cdn 单独包含它们，无论如何我这样做了我在使用 this.$http 或 this.$set 时仍然会出现错误，我开始怀疑它是否与 vue-resource 相关？有没有其他方法可以将我的 ajax 调用绑定到元素或组件，我不知道是什么，所以我无法让事情正常工作，一切似乎都被正确地放在一起，我已经阅读了无数其他 vuejs相关的问题，但是当您的知识很少时，一切都会受到限制。
谢谢，我将非常感谢您对此提出的任何建议，因为它让我发疯！
【问题讨论】：
标签： jquery ajax laravel vue.js