Vue 在输入输入值时，移至下一个字段

Question

我是 Vue 新手，这也是我在 Vue 上的第一个项目。我有三个包含空值的输入字段。select如果输入字段 1 收到超过 5 个字符，是否有办法自动转到第二个输入字段或使其移动？并转到输入字段 3，或者如果输入字段 2 包含超过 5 个字符，则选择输入字段 3？

看法

<div id="app">
  <h2>Input Fields:</h2>
  <div v-for="(todo,index) in todos" :key="index">

   <b-form-input type="text" v-model="todo.datatype" :value="todo.id" placeholder="Insert Datatype"
   v-on:input="moveToNextField($event)"></b-form-input>

   /** If the input field 1, consists more than 5 characters. Automatically move on to second input field **/

   <br>
  </div>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    todos: [
      { id: "1", datatype: ""},
      { id: "2", datatype: ""},
      { id: "3", datatype: ""}
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },

    moveToNextField(event){

        if(this.todos[0].datatype.length > 2)
          {
            console.log("field 1");
          }

      if(this.todos[1].datatype.length > 2)
          {
            console.log("field 2");
          }

    }

  }
})

下面是我上传到 JsFiddle 的代码

https://jsfiddle.net/ujjumaki/dpbojx0e/36/

Answer 1

首先，您不应该在同一元素/组件上同时使用v-model和。:value我假设您只想将输入绑定到每个todo.datatype.

您可以ref为输入分配一个属性，因为它们位于v-for迭代器中，所以将在组件的$refs属性中创建一个数组。

然后您可以使用它来控制焦点。

例如

new Vue({
  el: "#app",
  data: {
    todos: [
      { id: "1", datatype: "" },
      { id: "2", datatype: "" },
      { id: "3", datatype: "" }
    ]
  },
  methods: {
    moveToNextField(value, index) {
      const nextIndex = index + 1
      if (nextIndex < this.todos.length && value.length > 5) {
        this.$refs.todos[nextIndex].focus()
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <h2>Input Fields:</h2>
  <div v-for="(todo, index) in todos" :key="todo.id">
    <input 
      type="text" 
      v-model="todo.datatype" 
      placeholder="Insert Datatype" 
      ref="todos" 
      @input="moveToNextField($event.target.value, index)">
    <br>
  </div>
</div>

上述内容也适用于 BootstrapVue。