Vue this.$refs 返回一个看起来为空但在检查器中有值的对象答案

【问题标题】：Vue this.$refs returns an object that looks empty but has the value in the inspectorVue this.$refs 返回一个看起来为空但在检查器中有值的对象
【发布时间】：2020-06-14 16:12:50
【问题描述】：

我正在使用 watch 方法来观察道具的变化，当发生这种情况时，我想自动聚焦输入元素，我正在使用以下代码

  watch: {
    currentBookEntry: {
      immediate: true,
      handler: function() {
        console.log(this.$refs)
        console.log(this.$refs.inputElement)
      }
    }
  },

this.$refs.inputElement 返回未定义，this.$refs 返回一种空对象，在屏幕截图中您看到它没有 inputElement 数据，但如果我点击它在检查器中打开我确实看到那里的数据，这是什么来源？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

https://vuejs.org/v2/api/?#vm-nextTick
等到下一个 DOM 更新周期之后。

this.$nextTick(function(){
  console.log(this.$refs.inputElement)
})

【讨论】：