Можно ли создать динамический шаблон при компонентном подходе без создания и дальнейшего перебора массива в массиве в еще одном массиве?
Делаю SPA приложение контактов - 2 страницы для пользователя выглядит.
На первой App.vue у меня есть массив newContact: [], в который передаются данные из компонента NewContact.vue и после этого он пушится в общий массив contactData: [].
Данные добавляются, отображаются, но мне не нравится, что приходится хардкодить для страницы нового контакта.
Хотелось бы через v-for рисовать шаблон.
Можно ли создать динамический шаблон при компонентном подходе без создания и дальнейшего перебора массива в массиве в еще одном массиве?
Хочу чтобы код был не как сейчас (ниже показан), а ..., но никак не могу понять можно ли это сделать без array[array[array[]]] в конечном результате после записи данных, ведь их еще в json переводить надо будет.
В NewContact.vue хардкод идет (часть кода):
<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);
}
}
}
Средний