Question

<template>
  <div>
    <input ref='commandLine' />
  </div>
</template>

<script>
export default {
  mounted () {
    window.addEventListener('focus', this.pageFocused)
  },
  methods: {
    pageFocused: () => {
      console.log('pageFocused')
      console.log(this)
      this.$refs.commandLine.focus()
    }
  }
}
</script>

每次用户进入我的应用时，我都希望将注意力放在commandLine输入上。不幸的是，当我尝试使用$refs来查找我的<input>对象时，它是空的。

我怀疑是因为window.addEventListerer将我的函数放入不同的上下文中，所以this变量不代表我的组件。

什么是解决它的干净方法？

Answer 1

不要使用箭头函数定义方法。在箭头函数中，this以词法方式绑定，不会指向Vue。

methods: {
  pageFocused(){
    console.log('pageFocused')
    console.log(this)
    this.$refs.commandLine.focus()
  }
}

请参阅VueJS: why is “this” undefined?

我怀疑是因为window.addEventListerer放了我的功能进入不同的上下文，所以这个变量不代表我的成分

Vue将方法绑定到Vue对象，以便特定代码通常可以正常工作。但是，您不能绑定箭头功能。因此，你的问题。

当触发window.addEventListener（'focus'）时，$ refs未定义

1 个答案: