Question

我正在尝试使用this.$refs.cInput.focus()（cInput是裁判），它不起作用。我可以按g，输入应该弹出，光标应该放在其中，准备输入一些数据。它正在显示，但是焦点部分不起作用。我在控制台中没有看到错误。

Vue.component('coordform', {
  template: `<form id="popup-box" @submit.prevent="process" v-show="visible"><input type="text" ref="cInput" v-model="coords" placeholder =""></input></form>`,
  data() {
    {
      return { coords: '', visible: false }
    }
  },
  created() {
    window.addEventListener('keydown', this.toggle)
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
    window.removeEventListener('keydown', this.toggle)
  },
  methods: {
    toggle(e) {
      if (e.key == 'g') {
        this.visible = !this.visible;
        this.$refs.cInput.focus() //<--------not working
      }
    },
    process() {
        ...
    }
  }
});

Answer 1

您可以使用nextTick()回调：

设置vm.someData = 'new value'时，该组件不会   立即重新渲染。它将在下一个“滴答”中更新，   队列被刷新。 [...]

为了等到Vue.js完成数据更新后的DOM   更改，您可以在数据后立即使用Vue.nextTick(callback)   被改变了。回调将在DOM完成后被调用   已更新。

（source）

在您的切换功能中使用它，例如：

methods: {
  toggle(e) {
    if (e.key == 'g') {
      this.visible = !this.visible;
      this.$nextTick(() => this.$refs.cInput.focus())
    }
  }
}

Answer 2

就我而言，nextTick 效果不佳。

我只是像下面的例子一样使用了 setTimeout ：

doSearch () {
  this.$nextTick(() => {
    if (this.$refs['search-input']) {
      setTimeout(() => {
        this.$refs['search-input'].blur()
      }, 300)
    }
  })
},

我认为您的案例代码应如下所示：

toggle(e) {
  if (e.key == 'g') {
    this.visible = !this.visible;
    setTimeout(() => { this.$refs.cInput.focus() }, 300)
  }
}

无法让Vue专注于输入

2 个答案: