无法让Vue专注于输入

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更新后将调用回调。

（来源）

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

methods: {

  toggle(e) {

    if (e.key == 'g') {

      this.visible = !this.visible;

      this.$nextTick(() => this.$refs.cInput.focus())

    }

  }

}