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>