From 8d30830074dfc95912eff1fa59e2c85cb0eb2c31 Mon Sep 17 00:00:00 2001 From: divya Date: Tue, 5 Jun 2018 09:44:41 +0800 Subject: [PATCH 1/4] feat(bind): .sync modifier adds handler for kebab-case event --- src/compiler/parser/index.js | 12 +++++++++--- src/shared/util.js | 8 ++++++++ test/unit/features/directives/bind.spec.js | 21 +++++++++++++++++++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index a603b36bb55..4a26423b410 100644 --- a/src/compiler/parser/index.js +++ b/src/compiler/parser/index.js @@ -5,7 +5,7 @@ import { parseHTML } from './html-parser' import { parseText } from './text-parser' import { parseFilters } from './filter-parser' import { genAssignmentCode } from '../directives/model' -import { extend, cached, no, camelize } from 'shared/util' +import { extend, cached, no, camelize, kebabize } from 'shared/util' import { isIE, isEdge, isServerRendering } from 'core/util/env' import { @@ -512,7 +512,7 @@ function processComponent (el) { function processAttrs (el) { const list = el.attrsList - let i, l, name, rawName, value, modifiers, isProp + let i, l, name, rawName, value, modifiers, isProp, syncGen for (i = 0, l = list.length; i < l; i++) { name = rawName = list[i].name value = list[i].value @@ -538,10 +538,16 @@ function processAttrs (el) { name = camelize(name) } if (modifiers.sync) { + syncGen = genAssignmentCode(value, `$event`) + addHandler( + el, + `update:${kebabize(name)}`, + syncGen + ) addHandler( el, `update:${camelize(name)}`, - genAssignmentCode(value, `$event`) + syncGen ) } } diff --git a/src/shared/util.js b/src/shared/util.js index e4884734326..2325b813df2 100644 --- a/src/shared/util.js +++ b/src/shared/util.js @@ -158,6 +158,14 @@ export const camelize = cached((str: string): string => { return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') }) +/** + * Kebabize a camelCased string + */ +const kebabizeRE = /([a-z])([A-Z])/g +export const kebabize = cached((str: string): string => { + return str.replace(kebabizeRE, (m, p1, p2) => `${p1}-${p2}`).toLowerCase() +}) + /** * Capitalize a string. */ diff --git a/test/unit/features/directives/bind.spec.js b/test/unit/features/directives/bind.spec.js index e9ab1bf7361..b1c2d704c46 100644 --- a/test/unit/features/directives/bind.spec.js +++ b/test/unit/features/directives/bind.spec.js @@ -164,6 +164,27 @@ describe('Directive v-bind', () => { }).then(done) }) + it('.sync modifier with kebab case event', done => { + const vm = new Vue({ + template: ``, + data: { + bar: 1 + }, + components: { + test: { + props: ['fooBar'], + template: `
{{ fooBar }}
` + } + } + }).$mount() + + expect(vm.$el.textContent).toBe('1') + triggerEvent(vm.$el, 'click') + waitForUpdate(() => { + expect(vm.$el.textContent).toBe('2') + }).then(done) + }) + it('bind object', done => { const vm = new Vue({ template: '', From 2863f2a288aeda45e18f724d072f1053ba048cbb Mon Sep 17 00:00:00 2001 From: divya Date: Fri, 24 Aug 2018 13:11:03 -0500 Subject: [PATCH 2/4] fix: use hyphenate instead of kebabize --- src/compiler/parser/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index 4a26423b410..22392daa943 100644 --- a/src/compiler/parser/index.js +++ b/src/compiler/parser/index.js @@ -5,7 +5,7 @@ import { parseHTML } from './html-parser' import { parseText } from './text-parser' import { parseFilters } from './filter-parser' import { genAssignmentCode } from '../directives/model' -import { extend, cached, no, camelize, kebabize } from 'shared/util' +import { extend, cached, no, camelize, hyphenate } from 'shared/util' import { isIE, isEdge, isServerRendering } from 'core/util/env' import { @@ -541,7 +541,7 @@ function processAttrs (el) { syncGen = genAssignmentCode(value, `$event`) addHandler( el, - `update:${kebabize(name)}`, + `update:${hyphenate(name)}`, syncGen ) addHandler( From b7f4b7bb8d0b3d7bde155843644b8e2e3dd708b7 Mon Sep 17 00:00:00 2001 From: divya Date: Sun, 26 Aug 2018 18:36:14 -0700 Subject: [PATCH 3/4] fix: Remove unused method --- src/shared/util.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/shared/util.js b/src/shared/util.js index 2325b813df2..e4884734326 100644 --- a/src/shared/util.js +++ b/src/shared/util.js @@ -158,14 +158,6 @@ export const camelize = cached((str: string): string => { return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') }) -/** - * Kebabize a camelCased string - */ -const kebabizeRE = /([a-z])([A-Z])/g -export const kebabize = cached((str: string): string => { - return str.replace(kebabizeRE, (m, p1, p2) => `${p1}-${p2}`).toLowerCase() -}) - /** * Capitalize a string. */ From 809561fc7d9258baa16891abffeb4bfc58289178 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 21 Dec 2018 13:19:43 -0500 Subject: [PATCH 4/4] Update index.js --- src/compiler/parser/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index 22392daa943..6f207761b15 100644 --- a/src/compiler/parser/index.js +++ b/src/compiler/parser/index.js @@ -539,16 +539,18 @@ function processAttrs (el) { } if (modifiers.sync) { syncGen = genAssignmentCode(value, `$event`) - addHandler( - el, - `update:${hyphenate(name)}`, - syncGen - ) addHandler( el, `update:${camelize(name)}`, syncGen ) + if (hyphenate(name) !== camelize(name)) { + addHandler( + el, + `update:${hyphenate(name)}`, + syncGen + ) + } } } if (isProp || (