title: How to bind dynamically added form input with vue.js
body: <p>I want to render some forms and bind them to Vue.
  forms are listed on json Like this. </p>
  
  <pre><code>formslist:[
      "&lt;input type='text' name='item1' v-model='item1'&gt;",
      "&lt;input type='text' name='item2' v-model='item2'&gt;",
  ]
  </code></pre>
  
  <p>I could render them but couldn't bind.
  Template is this.</p>
  
  <pre><code>&lt;div v-for="form in formslist"&gt;
      &lt;div v-html="form"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Later, I understood that html added by "v-html" can't use data bindings.
  But then I don't have no ideas how to do this.
  Would anyone teach me good solution?</p>
  
  <hr>
  
  <p>Sorry for lack of words.
  I wrote code like this but "item1" and "item2" are not binded.</p>
  
  <p>js:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data() {
      return {
        formData: {},
        formslist:
          // this list is got by ajax as neccessary
          {
              "item1": "&lt;input type='text' name='item1' v-model='formData.item1'&gt;",
              "item2": "&lt;input type='text' name='item2' v-model='formData.item2'&gt;",
          }
      };
    },
    methods: {
      submit() {
        alert('formdata: ' +  JSON.stringify(this.formData));
  
        // submit data to backend
        // e.g. axios.post(...).then(...).catch(...);
      }
    }
  })
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div id="app"&gt;
    &lt;form name="myForm" @submit.prevent="submit"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Firstname&lt;/label&gt;
        &lt;input class="form-control" v-model="formData.firstName" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Lastname&lt;/label&gt;
        &lt;input class="form-control" v-model="formData.lastName" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Description&lt;/label&gt;
        &lt;textarea class="form-control" v-model="formData.description"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" v-for="(form, name) in formslist"&gt;
        &lt;label&gt;{{name}}&lt;/label&gt;
        &lt;div v-html="form"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button type="submit"&gt;
        Submit
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>