No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    dynamic v-model insite v-for input

    Framework
    3
    4
    1281
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Pedro last edited by

      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

      c7514223-3f03-4119-8348-af630e611144-image.png

      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

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @Pedro last edited by metalsadman

        @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.

        1 Reply Last reply Reply Quote 0
        • P
          Pedro last edited by

          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.

          1 Reply Last reply Reply Quote 1
          • cortez
            cortez last edited by

            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' },
            ],
            1 Reply Last reply Reply Quote 0
            • First post
              Last post