-1

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>
4
  • O que addAddressField faz?
    – Woss
    Commented 4/10/2022 às 21:46
  • É uma função com a lógica de criar um novo componente 'AddressField' com seu input. Ou seja, o cliente clica no botão e um novo campo de input é adicionado. addAddressField() { this.AddressFieldObject.push({ id: this.nextAddressFieldID++, }) this.newAddressField = '' } Commented 4/10/2022 às 21:48
  • Esse objeto não deveria ter um campo title?
    – Woss
    Commented 4/10/2022 às 21:55
  • Simmm, deveria! Valeu por me avisar ;) Adicionei com a mesma lógica do ID Agora, tentei usar tb a logica para o v-model, apesar do vuejs não sinalizar nenhum erro, o valor do input não atualiza de maneira correta ;/ Commented 4/10/2022 às 22:14

1 Resposta 1

-1

Sim tem como, segue o exemplo abaixo.

class Address {
  constructor() {
    this.street = ''
    this.number = ''
  }
}

new Vue({
  el: '#app', //Tells Vue to render in HTML element with id "app"
  data() {
    return {
      addresses: []
    }
  },
  methods: {
    newAddress() {
      this.addresses.push(new Address())
    }
  }
});

Vue.component("address-field", {
  props: {
    value: {
      type: Object,
      default: new Address()
    }
  },

  template: `
    <div>
    <div>
      <span>Street</span><span><input v-model="value.street" @input="$emit('input',value)"/></span>
    </div>
    <div>
      <span>Number</span><span><input v-model="value.number" @input="$emit('input',value)"/></span>
    </div>
    </div>
  `
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <button @click="newAddress">New Address</button>
    <address-field v-for="(addr,index) in addresses" :key="index" :value="addr" @imput="addresses[index] = $event" />
  </div>
  <div>
    {{addresses}}
  </div>
</div>

Apenas uma dica: Eu passei por diversos problemas utilizando o v-model com componentes aninhados e modelos aninhados, o vue não entende muito bem que houve uma modificação neste caso. Então a solução encontrada foi utilizar o evento @input para receber o objeto atualizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .