@ArutaGerman

Как создать динамический шаблон при компонентном подходе без создания и дальнейшего перебора массива в массиве в еще одном массиве?

Можно ли создать динамический шаблон при компонентном подходе без создания и дальнейшего перебора массива в массиве в еще одном массиве?
Делаю 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);         
        }
      }
}
  • Вопрос задан
  • 33 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
А откуда там взяться массиву в массиве и т.д.? Нужен массив объектов, которые описывают поля формы, а также объект с данными формы (это то, что сейчас у вас представлено отдельными свойствами). Всё:

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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 февр. 2021, в 08:12
1000 руб./за проект
26 февр. 2021, в 05:09
3000 руб./за проект
26 февр. 2021, в 04:16
3000 руб./за проект