Package Exports

vue-coerce-props

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-coerce-props) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VueCoerceProps

Transform/Coerce props values to whatever you want

Installation

npm install vue-coerce-props

Install the mixin globally or locally:

// main.js
import CoercePropsMixin from 'vue-coerce-props'

Vue.mixin(CoercePropsMixin)

// MyComponent.vue
import CoercePropsMixin from 'vue-coerce-props'

export default {
  // other options
  mixins: [CoercePropsMixin],
}

Usage

To coerce a prop, add a coerce function to any prop:

const SpaceTrimmer = {
  props: {
    text: {
      type: String,
      // this function is called by VueCoerceProps
      coerce: text => text.trim(),
    },
    style: {
      type: String,
      coerce(style) {
        // you can access the context as in a computed property
        // NEVER use this.$coerced here as it would create an infinite loop
        // if you use things coming from data, you may consider using
        // a computed property instead
        return this.possibleValues.includes(style) ? style : 'default'
      },
    },
  },
}

VueCoerceProps will inject a computed property named $coerced containing every single coerced prop:

<p>
  <span>Original value: {{ text }}</span>
  <span>Coerced value: {{ $coerced.text }}</span>
</p>

FAQ

Q: Why not passing component props as second argument? A: That would make every coerce value depend on every prop. At the end $coerced is just a computed property

License

MIT