发布于 2017-03-23 05:16:11 | 347 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Vue.js 教程,程序狗速度看过来!

Vue.js 轻量级 JavaScript 框架

Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。


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

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 then, this 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>

参看文章:
Stackoverflow:Axios can't set data



相关阅读 :
Laravel5.4 在vuejs 中使用axios不能获取属性data的解决方法
详解在Vue中通过自定义指令获取dom元素
vue项目中做编辑功能传递数据时遇到问题的解决方法
详解vue 中使用 AJAX获取数据的方法
用v-html解决Vue.js渲染中html标签不被解析的问题
详解Vue.js 2.0 如何使用axios
Vue中使用vux的配置详解
解决vue-cli中stylus无法使用的问题方法
vue使用Axios做ajax请求详解
vue 里面使用axios 和封装的示例代码
使用Vue.js创建一个时间跟踪的单页应用
详解vue中引入stylus及报错解决方法
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务