dynamic v-model insite v-for input
-
I’m creating input elements with v-for. Each of these components have a differente v-model bound to a local object ‘lclReservaDados’.
The name of the bound property is in the same array of the v-for items<q-input dense v-for="(item, codigo) in this.filterOptionsTipoPax" :key="codigo" :v-model="'lclReservaDados.' + item.sigla.toLowerCase()" :label="item.sigla" class="col-1 q-mx-sm" ></q-input> <!-- :v-model="monta1(item.sigla)" --> <!-- v-model="'lclReservaDados.' + item.sigla.toLowerCase()" -->
This way, if I inspect de html, the v-model is correct
but the Input created is not bound to the lclReservaDados object
I tried to create the v-model property name with a method or a computed property as you can the in the commented lines on code above. None of them worked.
Is there a way of do it ?Tks
-
@Pedro you can’t prefix a v-model with a colon. what you can do is something like
v-model="lclReservaDados[item.sigla.toLowerCase()]"
, and please give a feedback if an answer solves your issue. -
Thank you @metalsadman. It worked perfect. You helped me a lot, like allways.
All your answers in previous Topics were very helpful.
I was in doubt about if I should make a post just to confirm that the answers worked and thank the people who answered. There are foruns where these kind of messages are not allowed due to big amount of messages.
Thank you again. VueJs and Quasar are great tools. I hope in the near future I also can help others that are starting with VueJs and Quasar. -
Good night @Pedro, I’m trying to create the input fields dynamically, but when I type something and leave the input the information disappears, can you help me?
<q-input
dense
v-for="(item, id) in items"
:key=“id”
:v-model=“item.model”
:label=“item.label”
:type=“item.type”
input-class=“text-grey-7 q-pa-xs text-left”
> </q-input>items: [ { id: '1', model: 'nome_campo1', label: 'Novo Campo 1', type: 'text' }, { id: '2', model: 'nome_campo2', label: 'Novo Campo 2', type: 'text' }, { id: '3', model: 'nome_campo3', label: 'Novo Campo 3', type: 'text' }, { id: '4', model: 'nome_campo4', label: 'Novo Campo 4', type: 'text' }, ],