Vue.jsを数日間調べた後、laravelとやりとりする方法は何ですか？私の知識を十分に活用して、ユーザーエクスペリエンスを向上させたい、あるいは2つを強化するという希望を続けてはいけません。私がやろうとしていることはできないので、知識が豊富な人が私のロードブロックを克服するのに役立ちます。vue.jsにajax応答をバインドする（複数のリクエストを1ページに渡す）
私のやや基本的なモックアップを許してください！
すべては限りjqueryの/ Ajaxがしかし、私はvue.jsに上に移動しようとしていると物事がスムーズに実行していないとき、それはだ懸念していると正常に動作します。私はこれを使用し、これまでとき
は、しかし私は、細かい作業Ajaxリクエストを持って設定$またはこの$ 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を使用すると、$ httpはそれとは別に問題なく動作します。$を設定すると、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-リソース1.0.3が含まれており、私は単一の.jsファイルにゴクゴクとNPMを使用してみましたが、私はまた、CDN経由で個別にそれらを含めるしようとしました持っていますどのように私はそれを行うに関係なく、私はまだこれを使用するときにエラーが発生します。$ httpまたはthis。$セット、私はそのvueのリソースが関連しているのだろうか？私は要素やコンポーネントに私のajax呼び出しをバインドすることができます他の方法はありません、私は何をする必要がありますように働くことを得ることができないものを手掛かりがない、すべてが正しくまとめられているようだと私は無限の他のvuejsあなたの知識が少ししかないときはすべてが制限されています。
ありがとうございます、私はこのことが私を狂ってしまうように助言してくれて非常に感謝しています！
優秀な回答者と教育的回答、このような回答を提供するためにあなたの日を外していただきありがとうございます。私は今、それを撃つと、私の幸運が私の昼休みにいくらか変わったかどうかを見てみましょう！もう一度ありがとうございます。 – Birdy
ajaxVmの追加に関するアドバイス。 $ setと$ httpの両方に瞬時に働いたと思うので、vue.jsとjsの新人になるともっと複雑になると思ったので、基本的な基本を見落として48時間過ごしたと思います。 Craigはあなたがコンソール内でこのエラーを遭遇したことはありますか？TypeError：（新しいString（ "datas"））のプロパティに割り当てることはできません：オブジェクトではありません。私はlaravelからフルユーザオブジェクトを返そうとしましたが、基本的なhtml文字列とjsonオブジェクトを返そうとしましたが、{datas}に渡すときに失敗します – Birdy
laravelからjsonを返す場合は、 'var response = JSON.parse（response.body）;' –