inputNextFocus vue - js 跳轉 下一個 tab

<template>
  <Input v-model="val1"
         ref="inputBmRef"
         :class="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
         :prefix="val1.toUpperCase() === answer ? 'md-checkbox-outline' : 'md-code'"
         :style="{width: this.answer.length * 15 + 15 + 30 + 'px',
         }" />
</template>

<script>
export default {
  name: 'InputBm',
  props: {
    answer: {
      type: String,
      default: '',
    },
  },
  components: {},
  data () {
    return {
      val1: ''
    }
  },
  watch: {
    val1 (val) {
      if (val.toUpperCase() === this.answer) {
        this.inputNextFocus()
      }
    },
  },
  computed: {},
  methods: {
    inputNextFocus () {
      const thisInput = this.$refs.inputBmRef.$el.getElementsByTagName('input')[0]
      const inputs = document.getElementsByTagName("input")
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i] === thisInput) {
          // console.info('找到啦！')
          const tIndex = i + 1
          if (tIndex < inputs.length - 1) { // 不是最後一個 就跳下一個 - 最後一個就不跳了
            inputs[tIndex].focus()
            break
          }
        }
      }
    },
  },
  created () { },
  activated () { },
  mounted () { },
  beforeDestroy () { }
}
</script>

<style>
.md-checkbox-outline input {
  background-color: #ace7a8;
}
</style>