feat(model): add .eager modifier

Ignore `composing` value on the input and eagerly modify the value while
the user is still composing a value. vuejs#9299 vuejs#9777

Author: posva

src/platforms/web/compiler/directives/model.js

@@ -146,8 +146,8 @@ function genDefaultModel (
     }
   }
 
-  const { lazy, number, trim } = modifiers || {}
-  const needCompositionGuard = !lazy && type !== 'range'
+  const { lazy, number, trim, eager } = modifiers || {}
+  const needCompositionGuard = !lazy && type !== 'range' && !eager
   const event = lazy
     ? 'change'
     : type === 'range'

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

@@ -218,6 +218,26 @@ describe('Directive v-model text', () => {
     done()
   })
 
+  it('.eager modifier', () => {
+    const vm = new Vue({
+      data: {
+        test: 'foo'
+      },
+      template: '<input v-model.eager="test">'
+    }).$mount()
+    const input = vm.$el
+    triggerEvent(input, 'compositionstart')
+    input.value = 'baz'
+    // input before composition unlock should call set
+    triggerEvent(input, 'input')
+    expect(vm.test).toBe('baz')
+    // after composition unlock it should work
+    triggerEvent(input, 'compositionend')
+    input.value = 'bar'
+    triggerEvent(input, 'input')
+    expect(vm.test).toBe('bar')
+  })
+
   it('warn invalid tag', () => {
     new Vue({
       data: {