From 758524134e71ae025238e16a4c1f2b30a1310fe8 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Sat, 1 Dec 2018 06:56:41 +0800
Subject: [PATCH] fix: v-bind object should be overridable with kebab-cased
 props (#8845)

In addition .sync should generate camelCased event name
---
 .../render-helpers/bind-object-props.js       |  8 +++++---
 test/unit/features/directives/bind.spec.js    | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/core/instance/render-helpers/bind-object-props.js b/src/core/instance/render-helpers/bind-object-props.js
index c71dce5c4c..9a7b46dfa9 100644
--- a/src/core/instance/render-helpers/bind-object-props.js
+++ b/src/core/instance/render-helpers/bind-object-props.js
@@ -6,7 +6,8 @@ import {
   warn,
   isObject,
   toObject,
-  isReservedAttribute
+  isReservedAttribute,
+  camelize
 } from 'core/util/index'
 
 /**
@@ -43,12 +44,13 @@ export function bindObjectProps (
             ? data.domProps || (data.domProps = {})
             : data.attrs || (data.attrs = {})
         }
-        if (!(key in hash)) {
+        const camelizedKey = camelize(key)
+        if (!(key in hash) && !(camelizedKey in hash)) {
           hash[key] = value[key]
 
           if (isSync) {
             const on = data.on || (data.on = {})
-            on[`update:${key}`] = function ($event) {
+            on[`update:${camelizedKey}`] = function ($event) {
               value[key] = $event
             }
           }
diff --git a/test/unit/features/directives/bind.spec.js b/test/unit/features/directives/bind.spec.js
index e9ab1bf736..07d0704bf2 100644
--- a/test/unit/features/directives/bind.spec.js
+++ b/test/unit/features/directives/bind.spec.js
@@ -187,6 +187,26 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
+  it('bind object with explicit overrides', () => {
+    const vm = new Vue({
+      template: `<test v-bind="test" data-foo="foo" dataBar="bar"/>`,
+      components: {
+        test: {
+          template: '<div :data-foo="dataFoo" :data-bar="dataBar"></div>',
+          props: ['dataFoo', 'dataBar']
+        }
+      },
+      data: {
+        test: {
+          dataFoo: 'hi',
+          dataBar: 'bye'
+        }
+      }
+    }).$mount()
+    expect(vm.$el.getAttribute('data-foo')).toBe('foo')
+    expect(vm.$el.getAttribute('data-bar')).toBe('bar')
+  })
+
   it('.sync modifier with bind object', done => {
     const vm = new Vue({
       template: `<test v-bind.sync="test"/>`,