How to create a dynamic template in a component approach without creating and then iterating over an array within an array within yet another array?

Question

Vue.js

Is it possible to create a dynamic template in a component approach without creating and then iterating over an array within an array within yet another array?
I am making a SPA contact application - 2 pages for the user looks like.

On the first App.vue, I have an array newContact: [], into which the data from the NewContact.vue component is passed and after that it is pushed into the general array contactData: [].

The data is added, displayed, but I don't like that I have to hardcode for the new contact page.
I would like to draw a template through v-for.

Is it possible to create a dynamic template in a component approach without creating and then iterating over an array within an array within yet another array?
I want the code to be not like it is now (shown below), but ..., but I just can’t figure out if it can be done without array[array[array[]]] in the final result after writing the data, because they still need to be translated into json will.

In NewContact.vue the hardcode goes (code part):

<div>
              <span @click="showParam" class="form__other-title">Телефон</span>
              <div class="form__other-data">
                <input
                  v-model="contactPhone"
                  type="text"
                  placeholder="Телефон"
                />
              </div>
            </div>
            <div>
              <span @click="showParam" class="form__other-title">E-mail</span>
              <div class="form__other-data">
                <input v-model="contactMail" type="text" placeholder="E-mail" />
              </div>
            </div>
            <div>
              <span @click="showParam" class="form__other-title">Адрес</span>
              <div class="form__other-data">
                <input
                  v-model="contactAddress"
                  type="text"
                  placeholder="Адрес"
                />
              </div>
            </div>

export default {
  data() {
    return {
      visible: false,
      //данные контакта
      contactName: "",
      contactSurname: "",
      contactSecondName: "",
      contactMail: "",
      contactPhone: "",
      contactPhone2: "",
      contactAddress: "",
    }
  },
methods: {
this.contactId++;
      const name = this.contactName;
      const surname = this.contactSurname;
      const secondName = this.contactSecondName;
      const mail = this.contactMail;
      const phone = +this.contactPhone;
      const phone2 = +this.contactPhone2;
      const address = this.contactAddress;
      const userParam1 = this.userParam1;
      const userParam2 = this.userParam2;
      const id = this.contactId;
      //перечисляем что добавить в массив, сам метод push указан в app.vue
      this.$emit("save-contact", {
        'Имя':name,
        'Фамилия':surname,
        'Отчество':secondName,
        'e-mail':mail,
        'Телефон':phone,
        'Телефон_2':phone2,
        'Адрес':address,
}
});
}

app.vue:

export default {
  name: "app",
  data() {
    return {
      contactData: [],
      newContact: [],
      posts: null,
      endpoint: "/user_data.json",
      show: true,
      showNew: false,
    };
  },
  components: {
    Contacts: () => import("./components/Contacts.vue"),
    NewContact: () => import("./components/NewContact.vue"),
  },
  methods: {  
    saveContact(newContact) {
      let contacts = this.contactData;
      contacts.push(newContact);         
        }
      }
}

Answer 1

And where does the array in the array come from, etc.? You need an array of objects that describe the form fields, as well as an object with form data (this is what you now have separate properties). Everything:

data: () => ({
  formData: {},
  formMeta: [
    { name: 'phone', title: 'Телефон', type: 'text', placeholder: 'Телефон' },
    { name: 'email', title: 'E-mail', type: 'text', placeholder: 'E-mail' },
    { name: 'address', title: 'Адрес', type: 'text', placeholder: 'Адрес' },
    ...
  ],
}),

this.$emit('save-contact', this.formData);

<div v-for="n in formMeta">
  <span class="form__other-title">{{ n.title }}</span>
  <div class="form__other-data">
    <input
      v-model="formData[n.name]"
      :type="n.type"
      :placeholder="n.placeholder"
    >
  </div>
</div>