Question

我有一个Vue组件，正在其中尝试使用v-focus自动聚焦第一个字段。但是我的问题是，我将在页面顶部包含动态组件。那么在那种情况下，如何将自动对焦应用于动态包含的组件？

Answer 1

很难知道您是如何在没有任何伪代码的情况下将输入添加到DOM的，但这是一种实现方法。

new Vue({
  el: "#app",
  data: {
    inputs: ["firstName", "lastName"]
  },
  watch: {
    inputs() {
      this.$nextTick(() => {
        this.focusFirstInput();
      });
    }
  },
  methods: {
    focusFirstInput() {
      let first = this.inputs[0];
      let firstInput = this.$refs[first][0];
      firstInput.focus();
    },
    handleClick() {
      this.inputs.push("newInput");
    }
  },
  mounted() {
    this.focusFirstInput();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div>
    <div v-for="(input, index) in inputs" :key="index">
      <input :ref="input" type="text" />
    </div>
    <div>
      <button type="button" @click="handleClick">Click to add input</button>
    </div>
  </div>
</div>

Answer 2

我在Laracast上找到了这个答案，它对我有用。我要做的就是将下面的代码插入我的动态表单字段中。

this.$nextTick(() => {
  let index = this.items.length - 1;
  let input = this.$refs.title[index];
  input.focus();
});

HTML

<div id="app">
  <ul v-for="item in items">
    <li>
      <input :ref="'title'" v-model="item.title">
    </li>
  </ul>
  <button v-on:click="addItem">Add Item</button>
</div>

JS

let app = new Vue({
  el: '#app',
  data: {
    items: [
      {title: 'Apple'},
      {title: 'Orange'},
    ]
  },
  methods: {
    addItem(){
       this.items.push({title: "Pineapple"});
       this.$nextTick(() => {
         let index = this.items.length - 1;
         let input = this.$refs.title[index];
         input.focus();
      });
    }
  }
});

注意：请确保将:ref="'title'"添加到动态表单字段中。

该解决方案的原始作者致谢。

Answer 3

它们的关键是将所有ref上的input设置为相同的字符串，如下所示：

<input type="text" ref="myInputs"/>

然后，您将可以访问事件处理程序中名为this.$refs.myInputs的数组。

所以你只需要做

this.$refs.myInputs[0].focus();

new Vue({
  el: "#app",
  
  mounted() {
    this.$refs.myInputs[0].focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div>
    <div v-for="index in 3" :key="index">
      <input ref="myInputs" type="text" />
    </div>
  </div>
</div>

将v-focus应用于页面上的第一个输入字段

3 个答案: