0
I am making a form, in which it is necessary that I allow to add more fields. I have already managed to do this in other fields of this same form. However, everything I’ve tried for one last field goes wrong.
The div I want to add dynamically:
<div class="field opcao" v-for="(op, x) in body.fields.options" :key="x">
<label class="label">Opção de resposta para o campo anterior</label>
<input type="text" class="input" placeholder="Ex.: Couro" v-model="body.fields[index].options[x]">
</div>
<button type="button" class="button btn-secondary" @click="addOption(index)">Adicionar opção de resposta para o campo</button>
THE JS:
addOption(){
this.body.fields[index].options.push('');
}
My entire form is like this and for the other fields is working normally.
<form class="central">
<div class="field subcategoria cartao" v-for="(t, index) in body.type" :key="index" >
<label class="label">Nome da Subcategoria {{index}} *</label>
<input type="text" class="input" placeholder="Ex.:Casaco" required v-model="body.type[index]">
<small>Os campos da subcategoria ajudarão a definir melhor as características do objeto, para que suas chances de ser encontrado sejam maiores.</small>
<div class="field central">
<form class="central central">
<div class="campo central">
<div class="field">
<label class="label">Nome do campo *</label>
<input type="text" class="input" placeholder="Ex.: Material" required v-model="body.fields[index].name">
</div>
<div class="field opcao" v-for="(op, x) in body.fields.options" :key="x">
<label class="label">Opção de resposta para o campo anterior</label>
<input type="text" class="input" placeholder="Ex.: Couro" v-model="body.fields[index].options[x]">
</div>
<button type="button" class="button btn-secondary" @click="addOption(index)">Adicionar opção de resposta para o campo</button>
</div>
<button type="button" class="button btn-secondary">Adicionar campo</button>
</form>
</div>
</div>
<button type="button" class="button btn-secondary" @click="addNewSubcategorie()">Adicionar subcategoria</button>
<button type="button" @click="imprimir()">console</button>
</form>
I just discovered by the console, that it is adding the positions to the options array. But the field does not appear on the screen
– user133918