是否可以专注于“输入”标签，该标签是“ v-if”渲染的元素的子元素？

Question

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

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

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

在评估了'if'语句之后，如何关注该'input'元素？

Answer 1

这种方法行得通吗？在这里，我是deferring 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>

Answer 2

自动对焦可以工作吗？

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