adjust v-model on component sync mechanism (fix #3179)

Author: yyx990803

examples/select2/index.html

@@ -48,7 +48,7 @@
           .select2({ data: this.options })
           // emit event on change.
           .on('change', function () {
-            vm.$emit('input', mockEvent(this.value))
+            vm.$emit('input', this.value)
           })
       },
       watch: {
@@ -66,16 +66,6 @@
       }
     })
 
-    // mock an event because the v-model binding expects
-    // event.target.value
-    function mockEvent (value) {
-      return {
-        target: {
-          value: value
-        }
-      }
-    }
-
     var vm = new Vue({
       el: '#el',
       template: '#demo-template',

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

@@ -98,15 +98,18 @@ function genDefaultModel (
   const { lazy, number, trim } = modifiers || {}
   const event = lazy ? 'change' : 'input'
   const needCompositionGuard = !lazy && type !== 'range'
+  const isNative = el.tag === 'input' || el.tag === 'textarea'
 
-  const valueExpression = `$event.target.value${trim ? '.trim()' : ''}`
+  const valueExpression = isNative
+    ? `$event.target.value${trim ? '.trim()' : ''}`
+    : `$event`
   let code = number || type === 'number'
     ? `${value}=_n(${valueExpression})`
     : `${value}=${valueExpression}`
-  if (needCompositionGuard) {
+  if (isNative && needCompositionGuard) {
     code = `if($event.target.composing)return;${code}`
   }
-  addProp(el, 'value', `_s(${value})`)
+  addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
   addHandler(el, event, code)
   if (needCompositionGuard) {
     // need runtime directive code to help with composition events

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

@@ -21,7 +21,7 @@ describe('Directive v-model component', () => {
           methods: {
             onInput (e) {
               // something validate ...
-              this.$emit('input', e)
+              this.$emit('input', e.target.value)
             }
           },
           mounted () {