使用vue

Question

我正在使用vue在空白处进行填充。我有三个组件，一个用于生成问题的父组件，一个用于验证的输入组件，以及一个文本组件。我已经剥离了很多代码来尝试保持问题的相关性，注释掉的所有内容都不成功。希望我不在这个领域的左手，但从未尝试过这样做，所以以为我会在这里尝试。

第一期： 有些问题有两个输入，我想自动为第一个输入提供焦点，（使用自定义指令）我可以集中精力于最后创建的输入。我不确定我想如何访问第一个孩子。虽然可以很好地处理单个输入问题。我曾尝试通过使用$ refs和$ nextTick（（））来做到这一点，但是没有运气。

第二个问题： 一旦输入正确，我想自动将焦点集中在下一个可用的不正确元素上。我以为我可以从父级组件访问子级输入，并且一直在尝试using this link，但未成功。

非常感谢您的帮助或见解。谢谢

视觉效果

我追求的是

父组件

import ivInput from "../inline-components/iv-input.vue";
import ivText from "../inline-components/iv-text.vue";

<component 
    :is="buildQuestion(index)"
    ref="ivWrap"
    v-for="(item, index) in questionParts"
    :key="index">
</component>

export default() {
    components:{
        ivInput,
        ivText
    },
    mounted(){
        // console.log(this.$refs.ivWrap)
        // console.log(this.$refs.iv)
    },
    methods: {
         buildQuestion: function (index) {
            if(this.questionParts[index].includes('*_*')){
                return ivInput
            }else{
                return ivText
           }
         },
         //focus: function (){
            // this.$refs.iv.focus()
            // console.log(this.$refs.iv)
        // }
    }
}

输入组件

<div :class="'iv-input-wrap'">
  <input
    ref="iv"
    v-focus
    type="text"
    v-model="userInput"
    :class="[{'is-correct':isCorrect, 'is-error':isError}, 'iv-input']"
    :disabled="isCorrect">
</div>

export default{
   // directives:{
    // directive definition
      // inserted: function (el) {
      //   el.focus()
      // },
    }
    computed{
        isCorrect: function () {
          if(this.isType == true && this.isMatch == true){
          //  this.$refs.iv.focus()
          //  this.$nextTick(() => this.$refs.iv.focus)
           return true
         }
       }
    }
}