javascript - 是否可以关注作为“v-if”呈现的元素的子元素的“输入”标签？

Question

假设我有以下 vue.js 模板代码：

<div v-if="x===0">
  <input ref="text">{{text}}</input>
</div>

其中 x 是一些异步加载的数据。

在评估了“if”语句后，如何专注于该“输入”元素？

标签： javascripthtmlasynchronousvue.jsfocus

Answer 1

这种方法行得通吗？在这里，我推迟 this.$refs.textInput.focus()在下一个 DOM 更新周期之后执行（感谢@Bert提醒），以便 Vue 可以重新渲染组件（即它添加输入并设置 ref）并且我们将有 ref 来调用focus()函数.

new Vue({
  el: "#app",
  data: {
    x: 1,
    text: 'Hey'
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
  mounted() {
    setInterval(() => {
      this.x = 1 - this.x;          
    }, 1000);
  },
  watch: {
    x: {
      handler: function(value) {
        this.$nextTick(() => {
          this.$refs.textInput && this.$refs.textInput.focus();
        });
      }
    }
  }
})

body {
  padding: 20px;
}

#app {
  background: powderblue;
  padding: 20px;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div v-if="x===0">
    <input ref="textInput" v-model="text">
  </div>
</div>