Vue的v-for with.sync

<tbody>

      <tr is="itemComponent"
        v-for="(item, index) in items"
        v-bind:index="index"
        v-bind:item="item"
        v-bind:item-attribute.sync="item.attribute"
      </tr>

</tbody>

<td>
  <select
    v-bind:value="item-attribute"
    v-on:change="$emit('update:item-attribute', $event.target.value)
  >
    <option v-bind:value="true">Yes</option>
    <option v-bind:value="false">No</option>
  </select>
</td>

使用Vue的chrome扩展,我可以看到 <select> item.attribute (如果我手动更改,则select中的selected选项将更改),并且它在更改时也会激发“update:item attribute”事件,但不会更新父级的 item.item-attribute

从那时起,同步只是糖 v-on:update:item-attribute

<tbody>

      <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"
      </tr>

</tbody>

methods: {

  updateItemAttribute: function(index,attributeValue) {

    this.items[index].attribute = attributeValue;

  }

}

在子组件上,将select中的emit调用更改为(考虑到索引为:

v-on:change="$emit('update:item-attribute', index, $event.target.value)