文档章节

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
博文 121
码字总数 70529
作品 1
南京
部门经理
私信 提问
Vue进阶(四):使用 Vuex + axios 发送请求

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

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

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

大灰狼的小绵羊哥哥
2018/09/07
0
0
vue框架搭建之axios使用教程

本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 1、安装 2、引入main.js 文件引入: 3、使用 4、跨域与代理在vue本地开发时请求总是发生跨域解决方案:配置代理con...

前端攻城老湿
2018/11/22
0
0
vue-cli-3.0 axios 配置

参考:[https://www.jianshu.com/p/b22d03dfe006] 以下是可行的 npm install --save axios vue-axios store.js内容如下 以下是可行的 import Vue from 'vue' import Vuex from 'vuex' import......

dragon_tech
01/10
0
0
【记录一次坑经历】axios使用x-www-form-urlencoded 服务器报400(错误的请求。 )(后端.Net MVC5 WebApi OAuth,前端Electron-Vue)

首先放上源码 electron-vue axios 注册 axios.defaults.baseURL = 'http://localhost:8888/' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=U......

蒙多觉得你是个大凉们
01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 rabbitmq

AmqpTemplate接口没有参数说明,不知道传啥参数,这是很难受,不知道怎么看参数的定义.... 1、先来添加引用包 <dependency> <groupId>org.springframework.boot</groupId> <artifa......

朝如青丝暮成雪
26分钟前
1
0
replace File.separator出现异常:【java.lang.IllegalArgumentException: character to be escaped is missing】

写代码时,要写这么一个功能:将包名中的"."换成路径分隔符("/"或"",视操作系统而定),要求在window或linux下都能正常运行。 分析一下,这明显是个字符串替换的操作,可用使用String提供的...

Funcy1122
27分钟前
1
0
centos7下查找项目路径

1、查出tomcat的端口(如已知端口请忽略,其实用该命令也可以查出tomcat的位置,项目太多,不想找的话,就用下面的步骤吧。) ps -aux | grep tomcat 2、根据端口号查询进程,并获取进程ID ...

You_are_my_music
29分钟前
1
0
微信小程序与原生的App(iOS、Android)的优势对比

小程序也属于App的一种,那么它和我们现在流行的原生App(IOS、Android)相比,有什么区别和优势呢? 一、区别与优势 首先,从技术上来讲,目前App的主流开发方式有三种:Web App 、Native ...

Mr_ET
32分钟前
5
0
第二篇:SpringBoot接口Http协议

1、SpringBoot HTTP请求配置 简介:SpringBoot2.xHTTP请求注解讲解和简化注解配置技巧 1、@RestController and @RequestMapping是springMVC的注解,不是springboot特有的 2、@RestController...

嘴角轻扬30
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部