How can we declare a variable dynamically in data function in vue js?

Question

I have a form with three input fields name , email and phone but I want the user to be able to add more input fields dynamically so for every new input field added to the form, I want to declare a variable in the form object of data function.

The data() function is as below:

data(){
    return{
        form:{
            name:'',
            email:'',
            phone: '',
        }
    }
}  

Here as you can see I have three variables in the form object but I want to dynamically add another variable like phone2 , phone3 ...etc. whenever a new input field is added dynamically to the form.

Any help is appreciated in advance.

Answer 1

for your question is the full answer by @Dan. But why are you don't want to create a phone array to store dynamic phones in it? You can easily work with array add\remove and etc...

data(){
return{
    form:{
        name:'',
        email:'',
        phone: [XXXXXXX, XXXXXX],
    }
}

}