Tenho componentes que são adicionados na página principal através de um botão, ou seja, o cliente decide quantos componentes ele quer visualizar. Esses componentes são campos de inputs que serão armazenados dados.
Botão que aciona uma função para acrescentar o componente 'Addressfield'.
<div class="col-1 p-1 px-2">
<button
type="button"
class="btn btn-outline-success w-100"
@click="addAddressField">+
</button>
</div>
Tag com a lógica de adicionar o componente 'AddressField'
<ul class="p-0 m-0">
<address-field
v-for="(addressfield) in AddressFieldObject"
:key="addressfield.id"
:title="addressfield.title"
></address-field>
</ul>
Gostaria de saber se existe alguma lógina dentro do VueJS para adicionar um v-model diferente para cada 'AddressField' adicionado pelo cliente, para no fim coletar as informações inputadas.
Ou mesmo me ajudaria se fosse possível criar uma lista ou objeto com as informações inputadas em cada componente 'AddressField' adicionado!
O resultado que eu imagino seria algo do tipo:
- v-model: Addressfield01.
- v-model: Addressfield02.
- v-model: Addressfield03.
Ou uma lista com o valores de cada input
- lista = [ValorAddressField01, ValorAddressField02, ValorAddressField03]
Se ajudar, aqui está o código do 'AddressField':
<template>
<div class="input-group w-75 m-auto">
<div class="col-9">
<div class="p-1">
<input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Fill the address">
</div>
</div>
<div class="col-2">
<div class="p-1">
<select class="form-select" id="inputGroupSelect02">
<option value="2">Origin</option>
<option selected>Delivery Point</option>
<option value="1">Last Point</option>
</select>
</div>
</div>
</div>
</template>
addAddressField
faz?title
?