create vue.js v-model from dynamci value2019 Community Moderator ElectionCall a Vue.js component method from outside the componentvue.js disable input conditionallyOn-page data entry interaction with Vue.jsVue.js - How to properly watch for nested dataVue.js—Difference between v-model and v-bindOnly call method when a human changes an input - not when the method changes the input in Vue.jsHow to get the values from the DOM controls when the models are created dynamically using vuejsBootstrapVue control columns number in form groupMultiple Dynamic Checkboxes with input groups in vue jscreate highly dynamic input form components

Has Wakanda ever accepted refugees?

Can a Trickery Domain cleric cast a spell through the Invoke Duplicity clone while inside a Forcecage?

Ahoy, Ye Traveler!

Would the melodic leap of the opening phrase of Mozart's K545 be considered dissonant?

Is divide-by-zero a security vulnerability?

An Undercover Army

How can I be pwned if I'm not registered on the compromised site?

Create chunks from an array

If nine coins are tossed, what is the probability that the number of heads is even?

Why won't the strings command stop?

Split a number into equal parts given the number of parts

Difference between 'stomach' and 'uterus'

A bug in Excel? Conditional formatting for marking duplicates also highlights unique value

Is every open circuit a capacitor?

Make me a metasequence

Caulking a corner instead of taping with joint compound?

How can neutral atoms have exactly zero electric field when there is a difference in the positions of the charges?

Are small insurances worth it

When was drinking water recognized as crucial in marathon running?

Can we carry rice to Japan?

Are there other characters in the Star Wars universe who had damaged bodies and needed to wear an outfit like Darth Vader?

Should I use HTTPS on a domain that will only be used for redirection?

Can an earth elemental drown/bury its opponent underground using earth glide?

Wardrobe above a wall with fuse boxes



create vue.js v-model from dynamci value



2019 Community Moderator ElectionCall a Vue.js component method from outside the componentvue.js disable input conditionallyOn-page data entry interaction with Vue.jsVue.js - How to properly watch for nested dataVue.js—Difference between v-model and v-bindOnly call method when a human changes an input - not when the method changes the input in Vue.jsHow to get the values from the DOM controls when the models are created dynamically using vuejsBootstrapVue control columns number in form groupMultiple Dynamic Checkboxes with input groups in vue jscreate highly dynamic input form components










0















I am generating a some checkbox dynamically. Now I need to create v-model dynamic.



<div class="form-group input-group">
<label class="form-group-title">DIETARY PREFERENCES</label>
<p>Please mark appropriate boxes if it applies to you and/or your family</p>
<div class="check-group" v-for="v in alldietry" :key="v">
<input type="checkbox" v-model="userinfo.#Here will be the value" value="" id="Vegetarian">
<label for="Vegetarian">v.title</label>
</div>
</div>


into the v-model I have try v-model="userinfo.xyz" its shows error.










share|improve this question


























    0















    I am generating a some checkbox dynamically. Now I need to create v-model dynamic.



    <div class="form-group input-group">
    <label class="form-group-title">DIETARY PREFERENCES</label>
    <p>Please mark appropriate boxes if it applies to you and/or your family</p>
    <div class="check-group" v-for="v in alldietry" :key="v">
    <input type="checkbox" v-model="userinfo.#Here will be the value" value="" id="Vegetarian">
    <label for="Vegetarian">v.title</label>
    </div>
    </div>


    into the v-model I have try v-model="userinfo.xyz" its shows error.










    share|improve this question
























      0












      0








      0








      I am generating a some checkbox dynamically. Now I need to create v-model dynamic.



      <div class="form-group input-group">
      <label class="form-group-title">DIETARY PREFERENCES</label>
      <p>Please mark appropriate boxes if it applies to you and/or your family</p>
      <div class="check-group" v-for="v in alldietry" :key="v">
      <input type="checkbox" v-model="userinfo.#Here will be the value" value="" id="Vegetarian">
      <label for="Vegetarian">v.title</label>
      </div>
      </div>


      into the v-model I have try v-model="userinfo.xyz" its shows error.










      share|improve this question














      I am generating a some checkbox dynamically. Now I need to create v-model dynamic.



      <div class="form-group input-group">
      <label class="form-group-title">DIETARY PREFERENCES</label>
      <p>Please mark appropriate boxes if it applies to you and/or your family</p>
      <div class="check-group" v-for="v in alldietry" :key="v">
      <input type="checkbox" v-model="userinfo.#Here will be the value" value="" id="Vegetarian">
      <label for="Vegetarian">v.title</label>
      </div>
      </div>


      into the v-model I have try v-model="userinfo.xyz" its shows error.







      vue.js nuxt






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 19 hours ago









      mad maxmad max

      330112




      330112






















          2 Answers
          2






          active

          oldest

          votes


















          0














          To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.






          let vm = new Vue(
          el: '#app',
          data:
          userinfo:
          0: '',
          1: ''

          ,
          computed:
          alldietry()
          return [

          id: 0,
          title: 'Title'
          ,

          id: 1,
          title: 'Title'

          ]


          )

          <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
          <div id="app" class="form-group input-group">
          <label class="form-group-title">DIETARY PREFERENCES</label>
          <p>Please mark appropriate boxes if it applies to you and/or your family</p>
          <div class="check-group" v-for="(v, index) in alldietry" :key="index">
          <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
          <label :for="v.id">v.title</label>
          </div>
          userinfo
          </div>








          share|improve this answer






























            0














            You can't use interpolation inside attributes.



            The v-model value is a javascript expression, so instead of



            v-model="userinfo.xyz"


            you can just do



            v-model="userinfo[xyz]"


            as you would normally do in javascript when accessing an arbitrary property of an object.






            share|improve this answer






















              Your Answer






              StackExchange.ifUsing("editor", function ()
              StackExchange.using("externalEditor", function ()
              StackExchange.using("snippets", function ()
              StackExchange.snippets.init();
              );
              );
              , "code-snippets");

              StackExchange.ready(function()
              var channelOptions =
              tags: "".split(" "),
              id: "1"
              ;
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function()
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled)
              StackExchange.using("snippets", function()
              createEditor();
              );

              else
              createEditor();

              );

              function createEditor()
              StackExchange.prepareEditor(
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader:
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              ,
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              );



              );













              draft saved

              draft discarded


















              StackExchange.ready(
              function ()
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55021522%2fcreate-vue-js-v-model-from-dynamci-value%23new-answer', 'question_page');

              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.






              let vm = new Vue(
              el: '#app',
              data:
              userinfo:
              0: '',
              1: ''

              ,
              computed:
              alldietry()
              return [

              id: 0,
              title: 'Title'
              ,

              id: 1,
              title: 'Title'

              ]


              )

              <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
              <div id="app" class="form-group input-group">
              <label class="form-group-title">DIETARY PREFERENCES</label>
              <p>Please mark appropriate boxes if it applies to you and/or your family</p>
              <div class="check-group" v-for="(v, index) in alldietry" :key="index">
              <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
              <label :for="v.id">v.title</label>
              </div>
              userinfo
              </div>








              share|improve this answer



























                0














                To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.






                let vm = new Vue(
                el: '#app',
                data:
                userinfo:
                0: '',
                1: ''

                ,
                computed:
                alldietry()
                return [

                id: 0,
                title: 'Title'
                ,

                id: 1,
                title: 'Title'

                ]


                )

                <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
                <div id="app" class="form-group input-group">
                <label class="form-group-title">DIETARY PREFERENCES</label>
                <p>Please mark appropriate boxes if it applies to you and/or your family</p>
                <div class="check-group" v-for="(v, index) in alldietry" :key="index">
                <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
                <label :for="v.id">v.title</label>
                </div>
                userinfo
                </div>








                share|improve this answer

























                  0












                  0








                  0







                  To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.






                  let vm = new Vue(
                  el: '#app',
                  data:
                  userinfo:
                  0: '',
                  1: ''

                  ,
                  computed:
                  alldietry()
                  return [

                  id: 0,
                  title: 'Title'
                  ,

                  id: 1,
                  title: 'Title'

                  ]


                  )

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
                  <div id="app" class="form-group input-group">
                  <label class="form-group-title">DIETARY PREFERENCES</label>
                  <p>Please mark appropriate boxes if it applies to you and/or your family</p>
                  <div class="check-group" v-for="(v, index) in alldietry" :key="index">
                  <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
                  <label :for="v.id">v.title</label>
                  </div>
                  userinfo
                  </div>








                  share|improve this answer













                  To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.






                  let vm = new Vue(
                  el: '#app',
                  data:
                  userinfo:
                  0: '',
                  1: ''

                  ,
                  computed:
                  alldietry()
                  return [

                  id: 0,
                  title: 'Title'
                  ,

                  id: 1,
                  title: 'Title'

                  ]


                  )

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
                  <div id="app" class="form-group input-group">
                  <label class="form-group-title">DIETARY PREFERENCES</label>
                  <p>Please mark appropriate boxes if it applies to you and/or your family</p>
                  <div class="check-group" v-for="(v, index) in alldietry" :key="index">
                  <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
                  <label :for="v.id">v.title</label>
                  </div>
                  userinfo
                  </div>








                  let vm = new Vue(
                  el: '#app',
                  data:
                  userinfo:
                  0: '',
                  1: ''

                  ,
                  computed:
                  alldietry()
                  return [

                  id: 0,
                  title: 'Title'
                  ,

                  id: 1,
                  title: 'Title'

                  ]


                  )

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
                  <div id="app" class="form-group input-group">
                  <label class="form-group-title">DIETARY PREFERENCES</label>
                  <p>Please mark appropriate boxes if it applies to you and/or your family</p>
                  <div class="check-group" v-for="(v, index) in alldietry" :key="index">
                  <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
                  <label :for="v.id">v.title</label>
                  </div>
                  userinfo
                  </div>





                  let vm = new Vue(
                  el: '#app',
                  data:
                  userinfo:
                  0: '',
                  1: ''

                  ,
                  computed:
                  alldietry()
                  return [

                  id: 0,
                  title: 'Title'
                  ,

                  id: 1,
                  title: 'Title'

                  ]


                  )

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
                  <div id="app" class="form-group input-group">
                  <label class="form-group-title">DIETARY PREFERENCES</label>
                  <p>Please mark appropriate boxes if it applies to you and/or your family</p>
                  <div class="check-group" v-for="(v, index) in alldietry" :key="index">
                  <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
                  <label :for="v.id">v.title</label>
                  </div>
                  userinfo
                  </div>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered 19 hours ago









                  Adrien RosiAdrien Rosi

                  1344




                  1344























                      0














                      You can't use interpolation inside attributes.



                      The v-model value is a javascript expression, so instead of



                      v-model="userinfo.xyz"


                      you can just do



                      v-model="userinfo[xyz]"


                      as you would normally do in javascript when accessing an arbitrary property of an object.






                      share|improve this answer



























                        0














                        You can't use interpolation inside attributes.



                        The v-model value is a javascript expression, so instead of



                        v-model="userinfo.xyz"


                        you can just do



                        v-model="userinfo[xyz]"


                        as you would normally do in javascript when accessing an arbitrary property of an object.






                        share|improve this answer

























                          0












                          0








                          0







                          You can't use interpolation inside attributes.



                          The v-model value is a javascript expression, so instead of



                          v-model="userinfo.xyz"


                          you can just do



                          v-model="userinfo[xyz]"


                          as you would normally do in javascript when accessing an arbitrary property of an object.






                          share|improve this answer













                          You can't use interpolation inside attributes.



                          The v-model value is a javascript expression, so instead of



                          v-model="userinfo.xyz"


                          you can just do



                          v-model="userinfo[xyz]"


                          as you would normally do in javascript when accessing an arbitrary property of an object.







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered 18 hours ago









                          Decade MoonDecade Moon

                          13.4k32455




                          13.4k32455



























                              draft saved

                              draft discarded
















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid


                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.

                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function ()
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55021522%2fcreate-vue-js-v-model-from-dynamci-value%23new-answer', 'question_page');

                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                              2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                              Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme