Vue после введенного входного значения перейти к следующему полю - PullRequest
Новая
       68

Vue после введенного входного значения перейти к следующему полю

2 голосов
/ 26 мая 2020

Я новичок в Vue, и это мой первый проект на Vue. У меня есть три поля ввода, которые содержат пустые значения. Есть ли способ автоматически перейти ко второму полю ввода или сделать его select, если поле ввода 1 получает более 5 символов? И перейдите к полю ввода 3 или выберите поле ввода 3, если поле ввода 2 содержит более 5 символов?

Просмотр 

<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/

1 Ответ

2 голосов
/ 26 мая 2020

Прежде всего, вы не должны использовать одновременно 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.

...