Vue.js Vue'；s v-for with.sync

我有一个表行，每个行包含一个select。我希望在更改select选项时，更新父级（包含表）的数据

<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>

在子组件上，将选择中的“发射”调用更改为（考虑索引为：

v-on:change=“$emit（'update:item attribute'，index，$event.target.value）

---

不应该。sync在这方面帮助我，避免编写所有这些代码？我找不到任何关于它与v-for一起工作的内容。

答案是事件名称应该是camelCase，而不是kebab case，至少现在是这样

“至少现在”是因为这确实令人困惑，因为Vue的文档明确表示“始终使用

kebab case

作为事件名称”（请参阅），但不幸的是，在使用

update:eventName

和

sync

修饰符时，必须使用

camelCase

Vue的开发人员意识到了这种不一致性，在这一点上，更改代码行为或重写文档是一个悬而未决的问题。目前，

.sync

修饰符中的示例使用带有单个单词的事件名。有关更新，请参阅

所以，现在，在使用.sync修饰符时，应该使用

$emit（'update:propNameInCamelCase

）`

不要使用

$emit（'update:prop name in kebab case

），否则它将无法工作

---

感谢@Jacob Goh打开github问题。

我能够在这个JSFIDLE中重现这个问题。我还提交了一个新的Vue问题，答案是事件名称应该是camelCase。而不是kebab case。

$emit（'update:itemAttribute'，…）

。请参阅

<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>

<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;

  }

}