Merge pull request #1955 from lepture/coerce

add coerce option for component props

Author: yyx990803

src/directives/internal/prop.js

@@ -5,7 +5,7 @@
 
 import Watcher from '../../watcher'
 import config from '../../config'
-import { assertProp, initProp } from '../../util/index'
+import { assertProp, initProp, coerceProp } from '../../util/index'
 
 const bindingModes = config._propBindingModes
 
@@ -25,6 +25,7 @@ export default {
       parent,
       parentKey,
       function (val) {
+        val = coerceProp(prop, val)
         if (assertProp(prop, val)) {
           child[childKey] = val
         }

src/util/component.js

@@ -76,6 +76,7 @@ function getIsBinding (el) {
 
 export function initProp (vm, prop, value) {
   const key = prop.path
+  value = coerceProp(prop, value)
   vm[key] = vm._data[key] = assertProp(prop, value)
     ? value
     : undefined
@@ -143,6 +144,23 @@ export function assertProp (prop, value) {
   return true
 }
 
+/**
+ * Force parsing value with coerce option.
+ *
+ * @param {*} value
+ * @param {Object} options
+ * @return {*}
+ */
+
+export function coerceProp (prop, value) {
+  var coerce = prop.options.coerce
+  if (!coerce) {
+    return value
+  }
+  // coerce is a function
+  return coerce(value)
+}
+
 function formatType (val) {
   return val
     ? val.charAt(0).toUpperCase() + val.slice(1)

test/unit/specs/directives/internal/prop_spec.js

@@ -295,7 +295,7 @@ describe('prop', function () {
 
   describe('assertions', function () {
 
-    function makeInstance (value, type, validator) {
+    function makeInstance (value, type, validator, coerce) {
       return new Vue({
         el: document.createElement('div'),
         template: '<test :test="val"></test>',
@@ -307,7 +307,8 @@ describe('prop', function () {
             props: {
               test: {
                 type: type,
-                validator: validator
+                validator: validator,
+                coerce: coerce
               }
             }
           }
@@ -391,6 +392,17 @@ describe('prop', function () {
       expect(hasWarned('Expected String')).toBe(true)
     })
 
+    it('type check + coerce', function () {
+      makeInstance(123, String, null, String)
+      expect(getWarnCount()).toBe(0)
+      makeInstance('123', Number, null, Number)
+      expect(getWarnCount()).toBe(0)
+      makeInstance('123', Boolean, null, function (val) {
+        return val === '123'
+      })
+      expect(getWarnCount()).toBe(0)
+    })
+
     it('required', function () {
       new Vue({
         el: document.createElement('div'),