文档章节

vue axios 的坑之一

mellen
 mellen
发布于 2017/04/27 15:09
字数 359
阅读 77
收藏 0

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>

© 著作权归作者所有

共有 人打赏支持
mellen
粉丝 9
博文 118
码字总数 69257
作品 1
南京
部门经理
私信 提问
Vue进阶(四):使用 Vuex + axios 发送请求

Vue进阶(四):使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择...

sunhuaqiang1
05/05
0
0
Vue基于vuex和axios实现加载效果以及axios的安装配置

本篇文章给大家带来的内容是关于Vue基于vuex和axios拦截器实现loading效果及axios的安装配置,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。转载 http://www.php.cn/js-t...

大灰狼的小绵羊哥哥
09/07
0
0
前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方
01/08
0
0
Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月
04/16
0
0
vue结合axios与后端进行ajax交互

以前vue官方推荐的ajax库是vue-resource, 现在改为axios,原因详见Retiring vue-resource axios的github仓库 实现的效果: 页面异步发出get请求获取数据,提交表单异步post数据到服务端 客户...

章鱼喵_
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

程序员,你焦虑吗?

前言 我很焦虑,请问程序员们,你焦虑吗? 我是一名年过35的北漂程序员,我身边的朋友大多也是程序员。我总感觉到30岁以上的程序员充满了焦虑。“华为清退35岁以上老员工”、“中兴程序员坠楼...

Ala6
33分钟前
3
0
RabbitMQ+PHP 教程一(Hello World)用yii2测试通过

介绍 RabbitMQ是一个消息代理器:它接受和转发消息。你可以把它当作一个邮局:当你把邮件放在信箱里时,你可以肯定邮差先生最终会把邮件送到你的收件人那里。在这个比喻中,RabbitMQ就是这里...

hansonwong
39分钟前
2
0
Netty原理分析往这边看!

Netty是一个高性能、异步事件驱动的NIO框架,它提供了对TCP、UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动...

Java干货分享
43分钟前
3
0
在Scala中构建Web API的4大框架

Scala是一种强大的语言,很快就成为许多开发人员的最爱。然而,语言只是一个起点-并非每个函数都将由语言核心覆盖。Scala还创建了一些厉害的框架。接下来看看Scala的4个强大框架以及其优点和...

数据星河
46分钟前
2
0
天猫双 11 背后:409 亿次安全保护,全链路保障每个购物场景

2135 亿元!2018 天猫双 11 再次刷新纪录。 这一数字背后,为了让用户更畅快买买买,一个简单的点击下单过程,就有百余项阿里安全技术在保驾护航:全天拦截 16 亿次恶意攻击、保护 409 亿次用...

Mr_zebra
52分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部