title: Vue's v-for with .sync
body: <p>I have a table row, each containing a select. I wish that when the select option is changed, the data of the parent (containing the table) is updated.</p>
  
  <pre><code>&lt;tbody&gt;
  
        &lt;tr is="itemComponent"
          v-for="(item, index) in items"
          v-bind:index="index"
          v-bind:item="item"
          v-bind:item-attribute.sync="item.attribute"
        &lt;/tr&gt;
  
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Then in itemComponent (receives item-attribute as props):</p>
  
  <pre><code>&lt;td&gt;
    &lt;select
      v-bind:value="item-attribute"
      v-on:change="$emit('update:item-attribute', $event.target.value)
    &gt;
      &lt;option v-bind:value="true"&gt;Yes&lt;/option&gt;
      &lt;option v-bind:value="false"&gt;No&lt;/option&gt;
    &lt;/select&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Using Vue's Chrome extension, I can see that the <code>&lt;select&gt;</code> is reactive to <code>item.attribute</code> (if I change it manually, the selected option in the select changes), and that it also fires the 'update:item-attribute' event when changed, but it does NOT update the parent's <code>item.item-attribute</code> value. </p>
  
  <p>Since .sync is just sugar for <code>v-on:update:item-attribute</code>, I would need to write something like this on the parent component if I didn't want to use .sync:</p>
  
  <pre><code>&lt;tbody&gt;
  
        &lt;tr is="itemComponent"
          v-for="(item, index) in items"
          v-bind:index="index"
          v-bind:item="item"
          v-bind:item-attribute="item.attribute"
          v-on:update:item-attribute="updateItemAttribute"
        &lt;/tr&gt;
  
  &lt;/tbody&gt;
  
  methods: {
  
    updateItemAttribute: function(index,attributeValue) {
  
      this.items[index].attribute = attributeValue;
  
    }
  
  }
  </code></pre>
  
  <p>And, on the child component, change the emit call in the select to (considering index is :</p>
  
  <p><code>v-on:change="$emit('update:item-attribute', index, $event.target.value)</code></p>
  
  <p>Shouldn't .sync help me on this and avoid having to write all this code? I couldn't find any mention of it working with v-for. </p>