v-bind.sync listens for camelCase event

[sirlancelot]

What problem does this feature solve?

This markup:

<component :max-items.sync="showItems"></component>

Currently compiles to:

function render() {
    with(this) {
        return _c('component', {
            attrs: {
                "max-items": showItems
            },
            on: {
                "update:maxItems": function($event) {
                    showItems = $event
                }
            }
        })
    }
}

I've always written event handlers in kebab-case. It surprised me that the compiler created an event handler which is in camelCase.

What does the proposed API look like?

The compiler should output .sync event handlers in camelCase:

            on: {
                "update:max-items": function($event) {
                    showItems = $event
                }
            }

[LinusBorg]

Unfortunately, that would be a breaking change, because there are probably a lot of component packages that expose .sync props and were compiled with vue-loader. So using those packages with a new version of Vue that contains this changer would break those packages - they would emit update:maxItems, but your Vue app would listen to update:max-items

[posva]

I agree with @LinusBorg , we should revisit this for v3

[yyx990803]

I personally find it more consistent to reference all props in camelCase in JavaScript. But as said, this cannot be changed in v2 because it's going to be breaking.

[fer22f]

Please do revisit this issue for v3, as I think listening to such camel case events in DOM templates is impossible (as talked about here: #2669), and I wish I could be more consistent with my components by default:

    auto-complete(v-model="movie" :text-value.sync="movieText"
    @update:textValue="updateMovies" :item-text="({ title }) => title")

I "solved" the problem by implementing a helper function which issues events on both versions:

    vue.prototype.$emitCase = function (name, ...args) {
      const camelCaseName = name.toLowerCase().replace(/-(.)/g,
        (_, g) => g.toUpperCase())
      this.$emit(name, ...args)
      this.$emit(camelCaseName, ...args)
    }

Edit: It seems like Vue 2.3+ has introduced .camel, which "solves" the DOM issue. But I still think we should aim for more consistency.

[robertjk]

You definitely should add a note about that in the documentation. Today I spent half an hour trying to figure out why my .sync doesn't work.

The problem is that the documentation on Custom Events: Event Names states:

For these reasons, we recommend you always use kebab-case for event names.

So it's not always: more like always unless you emit event for .sync. You should add a note about that.

Also in the documentation Custom Events: .sync modifier I would change the example to use a property with multiple word name (now it's a single word title, which doesn't help with this problem) and/or add a note about this event name incosistency with previous recommendation ("always use kebab case") on the same page.

[LinusBorg]

Good suggestions to put in an issue in the vuejs.org repository.

Here they will go unnoticed, the issue is old and closed.

[robertjk]

Done: #8244 :).

[guidobouman]

The current behaviour goes directly against the docs, so it is a bug if you ask me.

See the Event Names and .sync Modifier sections in the docs, they state the exact opposite.

@shortdiv made a PR that could be released as 2.5.17. We're running into this bug with a large client. It would be great if we could remove these custom event patches before we go to production.