在vuejs 中使用axios不能获取属性data的解决方法

最新推荐文章于 2024-08-25 22:23:04 发布

原创最新推荐文章于 2024-08-25 22:23:04 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

本文探讨了在Vue应用中使用Axios发送HTTP请求时遇到的问题，特别是关于如何正确处理回调函数内的this上下文，以避免常见的错误。提供了两种解决方案：使用变量self保存this引用或采用ES6箭头函数。

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 then, this is not bound.

解决方法：

 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() {
       
       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>

参考文章：
Stackoverflow：Axios can't set data