feat(v-model): add lazy modifier for v-model on components(close #6914)

flow/compiler.js

@@ -163,6 +163,7 @@ declare type ASTElement = {
     value: string;
     callback: string;
     expression: string;
+    lazy: boolean;
   };
 
   directives?: Array<ASTDirective>;

flow/vnode.js

@@ -62,6 +62,7 @@ declare interface VNodeData {
   model?: {
     value: any;
     callback: Function;
+    lazy: boolean;
   };
 };
 

src/compiler/codegen/index.js

@@ -279,8 +279,15 @@ export function genData (el: ASTElement, state: CodegenState): string {
       el.model.callback
     },expression:${
       el.model.expression
-    }},`
+    }`
+
+    if (el.model.lazy) {
+      data += `,lazy:true`
+    }
+
+    data += '}'
   }
+
   // inline-template
   if (el.inlineTemplate) {
     const inlineTemplate = genInlineTemplate(el, state)

src/compiler/directives/model.js

@@ -8,7 +8,7 @@ export function genComponentModel (
   value: string,
   modifiers: ?ASTModifiers
 ): ?boolean {
-  const { number, trim } = modifiers || {}
+  const { number, trim, lazy } = modifiers || {}
 
   const baseValueExpression = '$$v'
   let valueExpression = baseValueExpression
@@ -26,6 +26,7 @@ export function genComponentModel (
   el.model = {
     value: `(${value})`,
     expression: JSON.stringify(value),
+    lazy: !!lazy,
     callback: `function (${baseValueExpression}) {${assignment}}`
   }
 }

src/core/vdom/create-component.js

@@ -251,7 +251,9 @@ function mergeHook (f1: any, f2: any): Function {
 // prop and event handler respectively.
 function transformModel (options, data: any) {
   const prop = (options.model && options.model.prop) || 'value'
-  const event = (options.model && options.model.event) || 'input'
+  const defaultEvent = data.model.lazy ? 'change' : 'input'
+  const event = (options.model && (data.model.lazy ?
+    options.model.eventLazy : options.model.event)) || defaultEvent
   ;(data.attrs || (data.attrs = {}))[prop] = data.model.value
   const on = data.on || (data.on = {})
   const existing = on[event]

test/unit/features/directives/model-component.spec.js

@@ -149,6 +149,40 @@ describe('Directive v-model component', () => {
     expect(vm.text).toBe('foo o')
   })
 
+  it('modifier: .lazy', () => {
+    const vm = new Vue({
+      template: `
+        <div>
+          <default-model ref="default" v-model.lazy="text1" />
+          <custom-model ref="custom" v-model.lazy="text2" />
+        </div>
+      `,
+      data: { text1: 'foo', text2: 'foo' },
+      components: {
+        'default-model': {
+          template: '<input>'
+        },
+        'custom-model': {
+          template: '<input>',
+          model: {
+            eventLazy: 'lazy-update'
+          }
+        }
+      }
+    }).$mount()
+    expect(vm.text1).toBe('foo')
+    vm.$refs.default.$emit('input', 'bar')
+    expect(vm.text1).toBe('foo')
+    vm.$refs.default.$emit('change', 'baz')
+    expect(vm.text1).toBe('baz')
+
+    // customized model option
+    vm.$refs.custom.$emit('change', 'bar')
+    expect(vm.text2).toBe('foo')
+    vm.$refs.custom.$emit('lazy-update', 'baz')
+    expect(vm.text2).toBe('baz')
+  })
+
   // #8436
   it('should not double transform mode props', () => {
     const BaseInput = {

test/unit/modules/compiler/codegen.spec.js

@@ -170,6 +170,12 @@ describe('codegen', () => {
       '<my-component v-model="\n test \n" />',
       `with(this){return _c('my-component',{model:{value:(\n test \n),callback:function ($$v) {\n test \n=$$v},expression:"\\n test \\n"}})}`
     )
+
+    // for lazy modifier
+    assertCodegen(
+      '<my-component v-model.lazy="\n test \n" />',
+      `with(this){return _c('my-component',{model:{value:(\n test \n),callback:function ($$v) {\n test \n=$$v},expression:"\\n test \\n",lazy:true}})}`
+    )
   })
 
   it('generate template tag', () => {

types/options.d.ts

@@ -109,6 +109,7 @@ export interface ComponentOptions<
   model?: {
     prop?: string;
     event?: string;
+    eventLazy?: string;
   };
 
   parent?: Vue;
@@ -127,6 +128,7 @@ export interface FunctionalComponentOptions<Props = DefaultProps, PropDefs = Pro
   model?: {
     prop?: string;
     event?: string;
+    eventLazy?: string;
   };
   inject?: InjectOptions;
   functional: boolean;