Laravel5.4 vuejs和axios使用钩子mounted不能获取属性data的解决方法

//出错问题:
then 这个里边的赋值方法this.followed = response.data.followed会出现报错,什么原因呢?原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。解决:self.followed = response.data.followed;或者使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量。

Here is my code:
数据属性:

 data(){
        return {
            followed : false,
        }
    },

axios请求数据:

 // mounted 方法为钩子,在Vue实例化后自动调用
    mounted() {
       axios.post('/api/question/follower', {
           'question':this.question,
           'user':this.user
       }).then(function(response){
           // console.log(response.data);
           this.followed = response.data.followed;
       })
    },

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

In option functions like data and created, vue binds this to the view-model instance for us, so we can use this.followed, but in the function inside thenthis is not bound.

So you need to preserve the view-model like (created means the component's data structure is assembled, which is enough here, mounted will delay the operation more):

解决方法:

    created() {
       var self = this;
       axios.post('/api/question/follower', {
           'question':this.question,
           'user':this.user
       }).then(function(response){
           // console.log(response.data);
           self.followed = response.data.followed;
       })
    },

或者我们可以使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量 :

 created() {
       axios.post('/api/question/follower', {
           'question':this.question,
           'user':this.user
       }).then((response) => {
           this.followed = response.data.followed;
       })
    },

完整代码:

 
<script>
export default {
    // 为父组件传递到子组件的属性值,子组件使用props方法接收
    props:['question', 'user'],
    // mounted 方法为钩子,在Vue实例化后自动调用
    mounted() {
       /**  这种旧的写法会在Laravel5.4中报错
        this.$http.post('/api/question/follower', {'question':this.question, 'user':this.user}).then(response => {
            console.log(response.data);
        })
        */
       axios.post('/api/question/follower', {
           'question':this.question,
           'user':this.user
       }).then(function(response){
           // console.log(response.data);
           this.followed = response.data.followed;
       })
    },
    data(){
        return {
            followed : false,
        }
    },
    computed:{
        text(){
           return this.followed ? '已关注' : '关注该问题';
        }
    },
    methods:{
        // 关注动作
        follow(){
            axios.post('/api/question/follow', {
                'question':this.question,
                'user':this.user
            }).then(function(response){
                this.followed = response.data.followed;
            })
        }
    }
}
</script>

在vuejs 中使用axios不能获取属性data的解决方法的更多相关文章

  1. jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法

    jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...

  2. [datatable]关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法

    -- :09关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法 在实际编程工程中,常常遇到这样的情况:DataTable并不 ...

  3. 检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下:

    检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第 一步:首先将msvcr71.dll,  SQLD ...

  4. log4j中Spring控制台输出Debug级信息过多解决方法

    log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...

  5. universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法

    在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...

  6. MySQL中遇到的几种报错及其解决方法

    MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...

  7. Eclipse中SVN修改的*星号没了,解决方法

    Eclipse中SVN修改的*星号没了,解决方法 打开Preference 第一步:去掉外加的 ">" 第二步:勾选Outgoing changes 这样做之后," ...

  8. BootStrap iCheck插件全选与获取value值的解决方法

    这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...

  9. Python3中使用HTMLTestRunner报No module named 'StringIO'解决方法

    今天在学习使用HTMLTestRunner生成测试报告时遇到一个报错,如图所示: 网上搜索了下“No module named 'StringIO'”解决方法,原来我用的是Python 3.X版本,而 ...

随机推荐

  1. PHP中遍历关联数组的方法

    下面介绍PHP中遍历关联数组的三种方法:foreach <?php $sports = array( 'football' => 'good', 'swimming' => 'ver ...

  2. 希尔伯特空间(Hilbert Space)

    欧氏空间 → 线性空间 + 内积 ⇒ 内积空间(元素的长度,元素的夹角和正交) 内积空间 + 完备性 ⇒ 希尔伯特空间 0. 欧几里得空间 欧氏空间是一个特别的度量空间,它使得我们能够对其的拓扑性质, ...

  3. Linux性能测试 ps命令

    名称:ps 使用权限:所有使用者 使用方式:ps [options] [--help] 说明:显示瞬间行程 (process) 的动态 参数: ps 的参数非常多, 在此仅列出几个常用的参数并大略介绍 ...

  4. javascript自定义事件讲解

    自定义事件 什么是自定义事件? 自定义事件:这要是跟函数有关系,就是让函数能够具备事件的某些特性 为什么要使用自定义事件? 有利于多人协作开发代码,一同开发不冲突 如何去挂载自定义事件与事件函数? 1 ...

  5. 最新用WPF为触摸屏写了一个手写程序,双格输入的

    原文:最新用WPF为触摸屏写了一个手写程序,双格输入的 双格输入可以提高手写速度,当前字写完以后可以自动识别提交,写下一个字.这样比单格手写速度提高一倍.特别适合触摸屏程序使用 界面如下: 程序如下: ...

  6. 用WPF轻松打造iTunes CoverFlow效果

    原文:用WPF轻松打造iTunes CoverFlow效果 用WPF轻松打造iTunes CoverFlow效果                                             ...

  7. FFmpeg来源简单分析:结构会员管理系统-AVClass

    ===================================================== FFmpeg章列表: [架构图] FFmpeg源码结构图 - 解码 FFmpeg源码结构图 ...

  8. 2-22-实现jsp通过tomcat连接mysql

    所有软件的版本如下: MySQL-Connector-Java: mysql-connector-java-5.1.36 Tomcat: apache-tomcat-8.0.26 JDK: jdk-8 ...

  9. WPF编游戏系列 之五 数据绑定

    原文:WPF编游戏系列 之五 数据绑定        在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作.对于数据绑 ...

  10. DataContext和ItemSource

    一对多的关系DataContext为上下文,绑定数据源ItemSource取上下文中的某属性,会一级一级往上找属性 一般ItemSource的绑定,绑定到Grid/DataGrid一类容器上,底下的控 ...