vue组件内更新DOM绑定方法,this的指向竟然不是VueComponent对象?

守夜人
  • 73

组件代码如下,我在网页上触发更新后的add方法,打印出来的this竟然是window?

Vue.component('button-counter', {
        data: function() {
            return {
                count: 0,
                value: 1
            }
        },
        mounted() {
            let async = Promise.resolve();
            async.then(_ => {
                this.count++
                this.add = function() {
                    console.log(this)
                }
            })
        },
        methods: {
            add: function() {
                console.log(0)
            }
        },
        template: '<div><button v-on:click="add">You clicked me {{ count }} times.</button></div>'
    })

image

回复
阅读 581
3 个回答
function() {
  console.log(this);
}
//函数会有作用域,可以使用箭头函数
() => { console.log(this); }

你的this本身就不是在vue组件里 而是promise里
老实点定义一个变量指向vue组件不好吗 明确省的this都不知道指到哪去

mounted() {
    var _this = this
    let async = Promise.resolve();
    async.then(_ => {
        _this.count++
        _this.add = function() {
            console.log(_this)
        }
    })
},
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏