0

estou aprendendo a trabalhar com vue.js, e preciso de algo relativamente simples mas que não consegui resolver, gerar inputs dinamicamente em um formulario. Basicamente o formulario já vem com um input, e sempre que clicar no botão adicionar tem que adicionar mais um input, podem me ajudar?

<template>
    <form method="POST" action="">
        <div class="name">
            <h5><b>Nome da Seção: </b></h5>
            <input type="text" class="form-control" id="nome" placeholder="Digite aqui o nome da seção">
        </div>
    <hr>
    <div id="idDiv">   
        <h5>Digite os Itens:</h5>     
        <input type="text" class="form-control" id="item" placeholder="Digite o nome do Item" style="max-width:300px;">        
    </div>
    <hr>
    <div class="submit">
        <button class="btn btn-outline-secondary" type="button" style="min-width:150px;">Adicionar</button>
        <button class="btn btn-outline-secondary" type="button" style="min-width:150px;">Enviar</button>
    </div>
</form>
</template>
<script>
    export default {

}
</script>
3

1 Resposta 1

2

o seguinte, vamos criar um novo método data que retorna objetos dentro do componente atual, dentro de data criaremos um 'contador', no exemplo dei o nome de input mesmo, input vai começar com o valor 1.

export default {
  data: () => {
      return {
        input: 1
       }
  }
}

Na parte do botão 'Adicionar' vamos definir um manipulador de eventos que vai interagir com o contador 'input' definido anteriormente. Funciona assim, a cada clique no botão vai ser adicionado ao contador 'input' mais uma unidade.

<button @click="input++" class="btn btn-outline-secondary" type="button" style="min-width:150px;">Adicionar</button>

No Input vamos utilizar o v-for para renderizar no html a quantidade de inputs baseado no contator 'input' que definimos anteriormente.

<input v-for="i in input" :key="i" type="text" class="form-control" :id='"item"+i' :placeholder="'Digite o nome do Item '+i" style="max-width:300px; margin-top:5px"> 

Note que utilizei uma bind no id do input para gerar dinamicamente um novo id a cada novo input adicionado ao nosso contador, o id para cada input ficara assim 'item' + valor do contador. Exemplo 'item1', 'item2', 'item3.... inserir a descrição da imagem aqui

Você pode entender mais do v-for aqui https://br.vuejs.org/v2/guide/list.html

Manipuladores de eventos aqui https://br.vuejs.org/v2/guide/events.html

Dados e métodos aqui https://br.vuejs.org/v2/guide/instance.html#Dados-e-Metodos

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 .