无法让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: {&nbsp; toggle(e) {&nbsp; &nbsp; if (e.key == 'g') {&nbsp; &nbsp; &nbsp; this.visible = !this.visible;&nbsp; &nbsp; &nbsp; this.$nextTick(() => this.$refs.cInput.focus())&nbsp; &nbsp; }&nbsp; }}