0

Estou fazendo um projeto com VueJS que possui 1 form e seus dados são renderizados na tela, porém, esse formulário tem opções de adicionar mais inputs e consequentemente renderizar esses dados também.

Então eu obtenho os valores do input por um v-model, através da função insertData() eu os inseri em um Object e renderizo em um loop pelo v-for. Pela função input++ eu adiciono mais inputs no formulário.

BUG:
O problema que está ocorrendo, é que ao adicionar mais inputs no formulário, os dados se repetem, pois o v-model é o mesmo
Trecho do Código:

<ul>
  <li v-for="(valor, index) in objFeature" :key="index">
    <p>Funcionalidade: {{valor.feature}}</p>
    <p>Horas de Desenvolvimento: {{valor.devHours}}</p>
    <p>Horas de Teste: {{valor.qaHours}}</p>
  </li>
</ul>


<form v-for="i in input" :key="i" type="text" class="form-control" :id='"item"+i'>
  <label for="features">Funcionalidade:</label>
  <input id="features" type="text" v-model.lazy="features" />

  <label for="dev-hours">Horas de Desenvolvimento:</label>
  <input id="dev-hours" type="number" v-model.lazy.number="devHours" class="test" />

  <label for="qa-hours">Horas de Teste:</label>
  <input id="qa-hours" type="number" v-model.lazy.number="qaHours" />
</form>
<button @click="insertData">Inserir</button>
<button @click="input++" type="button">Adicionar</button>

<script>
export default {
  data() {
    return {
      objFeature: null,
      input: 1
    };
  }
  insertData() {
    this.objFeature = [
      {
        feature: this.features,
        devHours: this.devHours,
        qaHours: this.qaHours
      }
    ];
    return this.objFeature;
  }
};
</script>



Tentei fazer sem v-model, pegando os valores do input com JS Vanilla mesmo (document.querySelectorAll), mas nessa situação apenas o último formulário era exibido dentro do <li></li>
Trecho do Código:

<ul>
  <li v-for="(valor, index) in objFeature" :key="index">
    <p>Funcionalidade: {{valor.feature}}</p>
    <p>Horas de Desenvolvimento: {{valor.devHours}}</p>
    <p>Horas de Teste: {{valor.qaHours}}</p>
  </li>
</ul>


<form v-for="i in input" :key="i" type="text" class="form-control" :id='"item"+i'>
  <label for="features">Funcionalidade:</label>
  <input id="features" type="text" class="features" />

  <label for="dev-hours">Horas de Desenvolvimento:</label>
  <input id="dev-hours" type="number" class="dev-hours" />

  <label for="qa-hours">Horas de Teste:</label>
  <input id="qa-hours" type="number" class="qa-hours" />
</form>
<button @click="insertData">Inserir</button>
<button @click="input++" type="button">Adicionar</button>

<script>
export default {
  data() {
    return {
      objFeature: null,
      input: 1
    };
  }
  insertData() {
    const elFeatures = document.querySelectorAll('.features');
    const elDevHours = document.querySelector('.dev-hours');
    const elQAHours = document.querySelector('.qa-hours');

    for (let i = 0; i < elFeatures.length; i++) {
      this.objFeature = [
        {
          feature: elFeatures[i].value
        }
      ]
    }
  }
};
</script>



Resumindo, preciso ter a opção de adicionar mais inputs no formulário e renderizar esses dados na tela.
Segue o código completo: https://github.com/GuiiHenriq/he4rtlabs-challenges-02/blob/master/src/components/Main.vue

<template>
  <div class="main">
    <div class="row">
      <section class="actions">
        <button>Inserir</button>
        <button>Apagar</button>
        <button>Importar</button>
        <button @click="createJson">Exportar</button>
      </section>

      <section class="valor-hora">
        <label for="price-hour">Valor Hora:</label>
        <input id="price-hour" type="text" v-model="priceHour" />
      </section>
    </div>

    <div class="row">
      <main>
        <ul>
          <li v-for="(valor, index) in objFeature" :key="index">
            <p>Funcionalidade: {{valor.feature}}</p>
            <p>Horas de Desenvolvimento: {{valor.devHours}}</p>
            <p>Horas de Teste: {{valor.qaHours}}</p>
          </li>
        </ul>
      </main>

      <aside>
        <h2>Funcionalidades:{{features}}</h2>
        <h2>Horas de Desenvolvimento:{{devHours}}</h2>
        <h2>Horas de Teste:{{qaHours}}</h2>
        <h2>Valor Total:{{priceHour}}</h2>
      </aside>
    </div>

    <div class="form">
      <form v-for="i in input" :key="i" type="text" class="form-control" :id='"item"+i'>
        <label for="features">Funcionalidade:</label>
        <input id="features" type="text" v-model.lazy="features" />

        <label for="dev-hours">Horas de Desenvolvimento:</label>
        <input id="dev-hours" type="number" v-model.lazy.number="devHours" class="test" />

        <label for="qa-hours">Horas de Teste:</label>
        <input id="qa-hours" type="number" v-model.lazy.number="qaHours" />
      </form>
      <!--<form v-for="i in input" :key="i" type="text" class="form-control" :id='"item"+i'>
        <label for="features">Funcionalidade:</label>
        <input id="features" type="text" class="features" />

        <label for="dev-hours">Horas de Desenvolvimento:</label>
        <input id="dev-hours" type="number" class="dev-hours" />

        <label for="qa-hours">Horas de Teste:</label>
        <input id="qa-hours" type="number" class="qa-hours" />
      </form>-->

      <button @click="insertData">Inserir</button>
      <button @click="input++" type="button">Adicionar</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      priceHour: 0,
      features: "",
      devHours: 0,
      qaHours: 0,
      objFeature: null,
      input: 1
    };
  },
  methods: {
    insertData() {
      this.objFeature = [
        {
          feature: this.features,
          devHours: this.devHours,
          qaHours: this.qaHours
        }
      ];
      return this.objFeature;

      /*const elFeatures = document.querySelectorAll('.features');
      const elDevHours = document.querySelector('.dev-hours').value;
      const elQAHours = document.querySelector('.qa-hours').value;
      for (let i = 0; i < elFeatures.length; i++) {
        this.objFeature = [
          {
            feature: elFeatures[i].value
          }
        ]
      }*/
    },
    createJson() {
      const jsonExport = {
        feature: this.features,
        devHours: parseFloat(this.devHours),
        testHours: parseFloat(this.qaHours)
      };
      console.log(jsonExport);
    }
  }
};
</script>

1 Resposta 1

1

Eu não peguei o seu código, porque, você está indo pelo caminho errado, o exemplo abaixo vai te mostrar como renderizar items vindos de um formulário simples com uma caixa de texto.

Esse exemplo minimo vai te dar um norte que possa ajudar a resolver o seu problema, verifique o exemplo:

Vue.config.devtools = false;
Vue.config.productionTip = false
var vm = new Vue({
  el: '#app',
  data: {
    todos: [{
      'id': 1,
      'name': 'name 1'
    }],
    name: ''
  },
  methods: {
    handleSubmit: function(e) {
      e.preventDefault();
      if (this.name.trim().length) {
        const obj = {
          'id': this.todos.length + 1,
          'name': this.name
        }
        this.todos.push(
          obj
        );
        this.name = '';
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit="handleSubmit">
    <input type="text" v-model="name" placeholder="name" />
    <button>Adicionar</button>
  </form>
  <ul v-for="item in todos" :key="item.id">
    <li>{{item.name}}</li>
  </ul>
</div>

1
  • Obrigado, realmente com essa lógica funcionou!
    – GuiHenriq
    Commented 28/05/2020 às 22:59

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 .