Vuejs v-model array in multiple input

Question

I have an input text field with a v-model attached  and every time someone hits the  Add  button  another input text get added to the DOM with the same v-model attached  I thought I d then get an array of the v-model values  but it only gets the value of the first v-model input    lt div id  app  gt     lt div id  references  gt       lt input v-model  references  type  text  gt     lt  div gt     lt button  click  addReference  gt Add lt  button gt   lt  div gt    The html I append to the dom is triggered by the addReference method   addReference  function e      e preventDefault      console log this references     var inputEl     lt input v-model  references  type  text  gt          references   append inputEl       Is this something Vuejs can t do  Is there a different approach of gathering values from dynamic dom elements with Vuejs    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      references   text  x000D       x000D    methods    x000D      addReference  function e    x000D        e preventDefault    x000D        console log this references   x000D        var inputEl     lt input v-model  references  type  text  gt    x000D            references   append inputEl   x000D        x000D      x000D     x000D  input   x000D    display  block  x000D    margin  1px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 16 vue min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt div id  references  gt  x000D       lt input v-model  references  type  text  gt  x000D     lt  div gt  x000D     lt button  click  addReference  gt Add lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s a demo of the above https   jsfiddle net sajadweb mjnyLm0q 11   x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      users     name   sajadweb  email  sajadweb outlook com      x000D       x000D    methods    x000D      addUser  function      x000D        this users push   name     email        x000D         x000D      deleteUser  function  index    x000D        console log index   x000D        console log this finds   x000D        this users splice index  1   x000D        if index   0  x000D        this addUser   x000D        x000D      x000D      x000D   lt script src  https   unpkg com vue dist vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt h1 gt Add user lt  h1 gt  x000D     lt div v-for   user  index  in users  gt  x000D       lt input v-model  user name  gt  x000D       lt input v-model  user email  gt  x000D       lt button  click  deleteUser index   gt  x000D        delete x000D       lt  button gt  x000D     lt  div gt  x000D     x000D     lt button  click  addUser  gt  x000D      New User x000D     lt  button gt  x000D     x000D     lt pre gt     data    lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You re thinking too DOM  it s a hard as hell habit to break  Vue recommends you approach it data first   It s kind of hard to tell in your exact situation but I d probably use a v-for and make an array of finds to push to as I need more   Here s how I d set up my instance   new Vue     el    app     data        finds            methods        addFind  function            this finds push   value                         And here s how I d set up my template    lt div id  app  gt     lt h1 gt Finds lt  h1 gt     lt div v-for   find  index  in finds  gt       lt input v-model  find value   key  index  gt     lt  div gt     lt button  click  addFind  gt      New Find    lt  button gt   lt  div gt    Although  I d try to use something besides an index for the key   Here s a demo of the above  https   jsfiddle net crswll 24txy506 9

User · Answer

If you were asking how to do it in vue2 and make options to insert and delete it  please  have a look an js fiddle   x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      finds      x000D       x000D    methods    x000D      addFind  function      x000D        this finds push   value   def      x000D         x000D      deleteFind  function  index    x000D        console log index   x000D        console log this finds   x000D        this finds splice index  1   x000D        x000D      x000D      x000D   lt script src  https   unpkg com vue 2 5 3 dist vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt h1 gt Finds lt  h1 gt  x000D     lt div v-for   find  index  in finds  gt  x000D       lt input v-model  find value  gt  x000D       lt button  click  deleteFind index   gt  x000D        delete x000D       lt  button gt  x000D     lt  div gt  x000D     x000D     lt button  click  addFind  gt  x000D      New Find x000D     lt  button gt  x000D     x000D     lt pre gt     data    lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

[arrays] Vuejs: v-model array in multiple input

Examples related to arrays

Examples related to vue.js