title: Vue.js: two-way data binding using object with v-for
body: <p>I'm having problems binding input data to object properties. I'm iterating through an object to generate input fields from its attributes, but the data binding won't work using v-model. Here's my code (the console log remains empty):</p>
  
  <pre><code>&lt;div id="app"&gt;
  &lt;div v-for='value, key in fields'&gt;
      {{ key }}: &lt;input v-model='value'&gt;
  &lt;/div&gt;
  &lt;button @click="add"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  new Vue({
  el: '#app',
  data: {
      fields: {
          id: 123,
          name: 'abc'
      }
  },
  methods: {
      add: function(){
            console.log('id: ' + this.fields.id)
            console.log('name: ' + this.fields.name)
      }
  }
  })
  
  &lt;/script&gt;
  </code></pre>