diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index 0279f0ffdbf..01cbadd1ded 100644 --- a/src/compiler/parser/index.js +++ b/src/compiler/parser/index.js @@ -33,7 +33,7 @@ const dynamicArgRE = /^\[.*\]$/ const argRE = /:(.*)$/ export const bindRE = /^:|^\.|^v-bind:/ const propBindRE = /^\./ -const modifierRE = /\.[^.]+/g +const modifierRE = /\.[^.\]]+(?=[^\]]*$)/g const slotRE = /^v-slot(:|$)|^#/ diff --git a/test/unit/features/options/directives.spec.js b/test/unit/features/options/directives.spec.js index 4f9a23ce79c..f7a69402d0b 100644 --- a/test/unit/features/options/directives.spec.js +++ b/test/unit/features/options/directives.spec.js @@ -287,4 +287,82 @@ describe('Options directives', () => { }).$mount() vm.key = 'bar' }) + + it('deep object like `deep.a` as dynamic arguments', done => { + const vm = new Vue({ + template: `
`, + data: { + deep: { + a: 'foo' + } + }, + directives: { + my: { + bind(el, binding) { + expect(binding.arg).toBe('foo') + }, + update(el, binding) { + expect(binding.arg).toBe('bar') + expect(binding.oldArg).toBe('foo') + done() + } + } + } + }).$mount() + vm.deep.a = 'bar' + }) + + it('deep object like `deep.a.b` as dynamic arguments', done => { + const vm = new Vue({ + template: `
`, + data: { + deep: { + a: { + b: 'foo' + } + } + }, + directives: { + my: { + bind(el, binding) { + expect(binding.arg).toBe('foo') + }, + update(el, binding) { + expect(binding.arg).toBe('bar') + expect(binding.oldArg).toBe('foo') + done() + } + } + } + }).$mount() + vm.deep.a.b = 'bar' + }) + + it('deep object as dynamic arguments with modifiers', done => { + const vm = new Vue({ + template: `
`, + data: { + deep: { + a: { + b: 'foo' + } + } + }, + directives: { + my: { + bind(el, binding) { + expect(binding.arg).toBe('foo') + expect(binding.modifiers.x).toBe(true) + expect(binding.modifiers.y).toBe(true) + }, + update(el, binding) { + expect(binding.arg).toBe('bar') + expect(binding.oldArg).toBe('foo') + done() + } + } + } + }).$mount() + vm.deep.a.b = 'bar' + }) })