Question

经过几天研究Vue.js以及它如何与laravel互动后，我已经开始喋喋不休了，我开始怀疑两件事：一个是我对我的知识还不够好继续我的愿望增强我们的用户体验或两个：它不可能做我想做的事情所以希望有更多知识的人可以帮助我克服我的障碍。

请原谅我相当基本的模特！

就jquery / Ajax而言，一切正常，但我试图转移到vue.js，那时事情没有顺利进行。

我有Ajax请求工作正常，但是当我使用它。$ set或this。$ http for get或post request我收到此消息：

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除此之外还可以正常工作。$ 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，我尝试将npm与gulp一起用于单个.js文件，我也尝试通过cdn单独包含它们，无论如何我这样做我在使用它时仍然会遇到错误。$ http或者。$ set，我开始怀疑它的vue资源是否相关？有没有其他方法我可以将我的ajax调用绑定到一个元素或组件，我不知道什么是我不能得到的东西工作应该，一切似乎正确放在一起，我读过无尽的其他vuejs相关的问题，但是当你的知识有点少时，一切都是有限的。

谢谢，我将非常感谢任何关于此的建议，因为它让我疯狂！

Answer 1

这看起来像是一个范围问题。使用this.$http this时必须引用Vue实例，您无法在Vue实例外部使用$set调用$http或this，因此您需要放置您在视图模型中的ajax请求：

var ajaxVm = new Vue({
    el:'#test',
    data:{
        User:{
            Name: 'John Doe'
        },
        datas: 'Hi'
    },
    methods:{
        callAjax: function(e){
           // Now this refers to the Vue instance
           this.$http.post('my-url',this.data).then((response) => {
                // Response logic here
           })
        }
    }
});

执行以下操作时，this引用封闭功能：

var queryAPI = function(){
  //here this refers to queryAPI, not vue
}

要从视图模型外部调用$http，您需要直接引用Vue实例：

var queryAPI = function(){
                // Now we are calling $http from the "ajaxVm" vue model instance
                ajaxVm.$http.post('/vue/ajax', this.formData).then(function(response) {
                    console.log(response);
                }, function() {
                    console.log('failed');
                })
            }

还要记住，函数内包装的任何内容都会创建它自己对this的引用，除非你使用箭头函数（这些exmaples假设你已经将代码放在Vue实例中）：

this.$http.get('/foo').this(function(response){
      // here this only refers to the function, not the Vue instance
});

使用ECMA6中的箭头功能：

this.$http.get('/foo').this((response) =>{
      // Because we used an arrow function, no new context is created
      // so this refers to the Vue instance
});

将ajax响应绑定到vue.js（单页上的多个请求）

1 个答案: