ref option is not working

[MicroDreamIT]

I am trying to develop dynamic form field I have explained the code below within a component,

<template>
    <div>
        <form @submit.prevent="addForms()">
            <select v-model="formName" class="form-control" @change="addForms">
                <option :value="label" v-for="label in fixedLabel">{{ label }}</option>
                <option value="custom">custom</option>
            </select>
            <div v-if="formName=='custom'">
                <input type="text"
                       v-model="formLabel"
                       @keyup.enter="addForms()"
                       placeholder="custom label" autofocus>
            </div>

            <button type="submit" v-if="formLabel && formName"> add </button>

        </form>

        <form @submit.prevent="postForm()">
            <div v-for="(frm, index) in forms">
                <label>{{frm.name}}</label>
                <input :type="frm.type"
                       :name="frm.name"
                       class="form-control"
                       v-model="frm.value"
                       :ref="'forms'"
                       v-validate="'required|min:3'"
                v-if="frm.name!='last_c_check'">

                <!--here is vue-bootstrap-datatimepicker-->
                <date-picker v-model="frm.value" :ref="'forms'" v-else></date-picker>
            </div>

            <button type="submit" >post</button>

        </form>

    </div>
</template>

<script>
    export default {
        computed:{
            _(){
                return _;
            }
        },
        name: "userAircraftCreate",
        data(){
            return {
                fixedLabel:[
                    'mtow',
                    'mlgw',
                    'engine_stage',
                    'tsn',
                    'csn',
                    'last_c_check',
                    'compliance'

                ],
                formName:null,
                formLabel:null,
                forms:[]
            }
        },
        methods:{

            addForms(){
                let type;
                let preventNextTick;
                preventNextTick = this.formName

                    if(this.formName=='tsn' || this.formName=='csn' || this.formName=='mtow'){
                        type='number'
                    }
                    else if(this.formName=='last_c_check'){
                        type='date'
                    }
                    else if(this.formName=='compliance'){
                        type='select'
                    }
                    else{
                        type='text'
                    }

                if( this.formName && this.formName !='custom' && this.formLabel==null){
                    this.forms.push({label:this.formName, type:  type , name:this.formName})
                    this.fixedLabel.splice(this.fixedLabel.indexOf(this.formName), 1);
                    this.formName=null
                }
                if(this.formName == 'custom' && this.formLabel){
                    this.forms.push({label:this.formLabel, type:'text', name:this.formLabel})
                    this.formName=null
                    this.formLabel=null
                }

               //ERROR PRODUCE IN HERE
                if(this.forms.length ){ 
                    this.$nextTick(() => {
                        let index = this.forms.length - 1;
                        let input = this.$refs.forms[index];
                        console.log(index, input);
                        input.focus();
                    });
                }
            },

            postForm(){

            }
        }
    }
</script>

<style scoped>

</style>

In here if i select other field then input.focus() is working. But if i select date type field then input.focus() is not working, here is the error message if I select date type field, Error in nextTick: "TypeError: Cannot read property '0' of undefined"

[ankurk91]

This is bad that you didn't fill the issue template and poured tons of code that is unrelated to the issue. I am not sure if you can create array of refs in vue js. But single ref works fine. see

https://jsfiddle.net/01407frf/607/

I think you are missing the $el here

// your code
let input = this.$refs.forms[index];

// should look like this
let input = this.$refs.forms[index].$el;

another point is that you can not have same ref for all inputs

// this will end up having a single ref for each of input
:ref="'forms'"

[MicroDreamIT]

@ankurk91 I apologize to try to reproduce the code like that, kinda novice approach.

Let me try one more time,

https://jsfiddle.net/01407frf/634/

In that example Line : 43 indexing is not working as I have used another datetime field line 10, that's where I am stuck in. I will be grateful to you if you can help me resolve this issue.

[ankurk91]

refs need be accessed via their names and names are strings. https://jsfiddle.net/01407frf/635/

You have to set a unique name for each input ref. You can differentiate them by for loop index

 :ref="`forms_${index}`"

Then in js, access them via their index

let input = this.$refs.[`forms_${index}].$el;
input.focus()

Their are various discussion like this - https://forum.vuejs.org/t/better-method-of-using-refs-inside-a-v-for-based-on-object/21352

Thats all i can help.

[MicroDreamIT]

Boss please close this issue, Thank you a lot.