vue axios 的坑之一
博客专区 > mellen 的博客 > 博客详情
vue axios 的坑之一
mellen 发表于8个月前
vue axios 的坑之一
  • 发表于 8个月前
  • 阅读 59
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

methods: {
                    reverseMessage: function() {
                   
                 
                        axios.get('sites.php').then(function(response) {
                           
                            this.sites=response.data.sites;
                            console.log(this.sites);

                          this.message= sites[1].Name;

出错问题:
then 这个里边的赋值方法this.sites=response.data.sites;会出现报错,什么原因呢?在Google上查了下,原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。

修改如下:

methods: {
                    reverseMessage: function() {
                      var self= this;
                       axios.get('sites.php').then(function(response) {
                           self.sites=response.data.sites;
                            console.log(this.sites);

                         self.message= sites[1].Name;

 

 

 

完整例子:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>post交互</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>

        </style>
        <link rel="stylesheet" href="css/mui.min.css">
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/vue.min2.2.js"></script>
        <script type="text/javascript" src="js/axios.min.js"></script>
        <script type="text/javascript" src="js/public.js"></script>

        <link href="css/mystrap.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" type="text/css" href="css/app.css" />
    </head>

    <body>
        <div id="app">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="list in sites">
                    <a href="javascript:;">

                        <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
                        <div class="mui-media-body">

                            <p class='mui-ellipsis'>{{list.Name}} {{list.Url}}</p>

                        </div>
                    </a>
                </li>
            </ul>

            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转字符串</button>
            <button v-on:click="addNewTodo">测试2</button>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: '123',
                    sites: []

                },

                methods: {
                    reverseMessage: function() {
                        var self = this;
            
                        axios.get('sites.php').then(function(response) {
                
                            self.sites = response.data.sites;
                            console.log(this.sites);

                            self.message = sites[1].Name;
                            //console.log(this.message);
                            //each(this.sites, function(i, item) {
                            //this.message = item.Name;
                            //console.log(this.message);
                            //console.log(item.Name + "<br/>" + item.Url + "<br/>" + item.Country);
                            //

                        }).catch(function(error) {
                            console.log(error);
                        });

                    },

                    addNewTodo: function() {
                        this.message = '2333';
                        this.sites = [{
                                "Name": "菜鸟教程",
                                "Url": "www.runoob.com",
                                "Country": "CN"
                            },
                            {
                                "Name": "Google",
                                "Url": "www.google.com",
                                "Country": "USA"
                            },
                            {
                                "Name": "Facebook",
                                "Url": "www.facebook.com",
                                "Country": "USA"
                            },
                            {
                                "Name": "微博",
                                "Url": "www.weibo.com",
                                "Country": "CN"
                            }
                        ]

                    }
                }
            })
        </script>
    </body>

</html>

共有 人打赏支持
粉丝 10
博文 108
码字总数 67657
作品 1
×
mellen
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: