Vue динамический дочерний и дочерний компонент

Question

У меня есть Address.vue компонент, содержащий дочерний компонент Contact.vue .

One address container many component

Что у меня естьсделано:

Я создал компонент Address.vue , который может динамически увеличиваться, поэтому пользователь может нажать Добавить новый адрес , и у него будет столько адресов, сколько онхочет.

Также в компоненте Address.vue пользователь может добавить несколько контактов столько, сколько он хочет.

Итак, давайте скажем здесь связь1 address can have multiple contacts, а также пользователь может добавить несколько адресов.

Я сделал этот интерфейс, и все работает отлично.

Что я пытаюсь сделать:

Сохраните контакт каждого адреса в JSON Array, например:

values: [
{
  address: {
    location: "Any location", 
    contacts: [{
      name: "Contact One",
      phone_number: "12345"
    }]
  }
},
{
  address: {
    location: "another location", 
    contacts: [
      {
        name: "Contact 3",
        phone_number: "6789"
      },
      {
        name: "Contact 4",
        phone_number: "101010"
      },
    ]
  }
},
]

Что я сделал:

Я сохранил массив контактов в компоненте Contact.vue в массиве и событие для отправки данных из дочернего компонента (Contact.vue) вродительский компонент (Address.vue) .

Затем я получил массив контактов из события, созданного в Address.vue компонент

Проблема:

Я не могу отнести контакты к родительскому адресу , как в структуре JSON, упомянутой выше.

Answer 1

Надеюсь, я правильно понимаю вашу проблему:

Примечание. Если вы создаете компонент «Контакты» в компоненте «Адрес».Vue назначит каждому контакту свой родительский адрес.

Например:

Address.vue

<contact :id="this.count"></contact>

Если Contacts.vue созданы в Address.vue,в Address.vue:

Затем в Andress.vue вы можете создать объект или элемент массива:

data(){
  return{
     location: "Any location"
     contacts:[]
  }
}

Затем создать функцию saveContacts:

methods: {
  saveContacts(event, contact){
     this.contacts.push(contact);
  }
}

Инаконец, когда вы проверяете событие, вызывайте функцию:

@addedContact="saveContact($event,contact)"

Таким образом, вы будете иметь все адреса со своими контактами.Более или менее то, что вы показали в своем комментарии.

Надеюсь, это может быть полезно для вас.