个人中心
gpt4 book ai didi

jquery - 将 ajax 响应绑定(bind)到 vue.js(单个页面上的多个请求)

转载 作者：搜寻专家 更新时间：2023-10-30 22:35:16 25 4
gpt4 key购买 nike

在研究 Vue.js 以及它如何与 laravel 交互几天后，我陷入了困境，我开始怀疑两件事:一个是我的知识还不够好，无法继续我的愿望增强我们的一两个用户体验:我不可能做我想做的事情，所以希望有更多知识的人可以帮助我克服我的障碍。

请原谅我相当基础的模型!

My very basic mock example of how the request currently works!

就 jquery/Ajax 而言，一切正常，但我已尝试转移到 vue.js，但那时事情运行不顺利。

我的 Ajax 请求工作正常，但是当我使用 this.$set 或 this.$http 获取或发布请求时，我收到此消息:

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 的 apose 除了 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，我尝试将 npm 与 gulp 一起用于单个 .js 文件，我还尝试通过 cdn 单独包含它们，无论如何我这样做了 我仍然在使用 this.$http 或 this.$set 时遇到错误，我开始怀疑它是否与 vue-resource 相关？有没有其他方法可以将我的 ajax 调用绑定(bind)到元素或组件，我不知道我无法让事情正常工作，一切似乎都正确地组合在一起，我已经阅读了无数其他 vuejs相关问题，但当你的知识有点少时，一切都是有限的。

谢谢，我将非常感谢对此的任何建议，因为它让我发疯!

最佳答案

这看起来像是范围问题。使用 this.$http 时 this 必须引用 Vue 实例，不能调用 $set 或 $http this 在 Vue 实例之外，因此您需要将 ajax 请求放在 View 模型中:

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
}

要从 View 模型外部调用 $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 的引用，除非您使用箭头函数(这些示例假设您已将代码放在 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
});

关于jquery - 将 ajax 响应绑定(bind)到 vue.js(单个页面上的多个请求)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40505967/

25 4 0
文章推荐： javascript - watch 是异步的吗？
文章推荐： javascript - 如何在页面处于加载状态时摆脱 vuejs 中的 {{ user.id }}(花括号)
文章推荐： javascript - 是否可以获取vuejs元素的DOM元素？
文章推荐： vue.js - routerview 中的 Controller 和父级 Controller 之间的两种方式绑定(bind)
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com