文档章节

vue axios 的坑之一

mellen
 mellen
发布于 2017/04/27 15:09
字数 359
阅读 72
收藏 0
点赞 0
评论 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
博文 114
码字总数 69070
作品 1
南京
部门经理
Vue进阶(四):使用 Vuex + axios 发送请求

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

sunhuaqiang1
05/05
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.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
vue结合axios与后端进行ajax交互

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

章鱼喵_
07/05
0
0
已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async

github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,v...

liangfengbo
05/25
0
0
vue 2.0后的使用(二)

ref ref可以获取到Dom元素还可以获取到vue组件,从而获取到vue组件中的数据 Vue组件缓存或是路由跳转后再次打开不刷新,以及缓存页面的传值等 如果你想要打开组件后,再次打开组件不重新刷新...

Chason-洪
2017/11/08
0
0
AgileBPM/bpm-app

AgileBPM 移动端 与pc端无缝协同处理办公任务。 它是一个比较完整的流程审批的移动端项目,如果您是第一次开发基于VUE的App,它是一个很好的基础项目模板。如果您正在开发协同办公类APP,那么...

AgileBPM
昨天
0
0
前后分离(一)---前后端数据交互,axios和jquery ajax的区别

axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的。刚开始的时候,也是遇到了很多问题。 逐渐摸透了它的脾气。 首先说说FormData和Payload两种数据格式的区别: ...

u010775025
05/26
0
0
基于 Webpack2、Vue2、iView2 的可视化脚手架 iView Cli 发布 2.0 版本

谷歌今天发布了一系列“性感”的软件,我们也发布了一款大家期待已久的开发者工具,同样很性感 :) iView 2.0 已经发布有两个月了,在 2.0 发布后,npm 下载量、issues 数量都提升了很多(可...

Aresn
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
26分钟前
0
0
NetCat Tutorials

Hacking with Netcat part 1: The Basics Hacking with Netcat part 2: Bind and reverse shells Hacking with Netcat part 3: Advanced Techniques 10 Introduction to Netcat - pdf NetCat......

zungyiu
26分钟前
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
26分钟前
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
40分钟前
0
0
svn: Unable to connect to a repository URL 的解决方案

错误图示: 解决办法:清除本地保存的授权信息; 1:右键点击本地文件夹,选择设置; TortoiseSVN -> Settings 2:在弹出的对话框中选择 Saved Data, 右侧选择:授权地方清理所有。 然后点确...

宁哥实战课堂
今天
1
0
sleep与wait的区别

Thread.sleep(XXX)方法消耗CPU吗? 这个知识点是我之前认识一直有错误的一个知识点,在我以前的认识里面,我一直认为Thread.sleep(1000)的这一秒钟的时间内,线程的休眠是一直占用着CPU的时间...

码代码的小司机
今天
1
0
20位活跃在Github上的国内技术大牛 leij 何小鹏 亚信

本文列举了20位在Github上非常活跃的国内大牛,看看其中是不是很多熟悉的面孔? 1. lifesinger(玉伯) Github主页: https://github.com/lifesinger 微博:@ 玉伯也叫射雕 玉伯(王保平),...

海博1600
今天
1
0
Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
今天
1
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
今天
1
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
今天
407
12

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部