posva / Vue Coerce Props
Licence: mit
Coerce props to whatever you want
Stars: ✭ 72
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Coerce Props
Ngx Infinite Scroll
Infinite Scroll Directive for Angular
Stars: ✭ 1,024 (+1322.22%)
Mutual labels: utility
C Utils
Tiny, modular, drop-in, library of some most commonly used utility methods for C (embedded) applications. Intended to be used as a git-submodule inside your projects to kickstart development. See https://c-utils.gotomain.io for more details.
Stars: ✭ 47 (-34.72%)
Mutual labels: utility
Remixbot
A multifunctional Discord bot in development that allows you to easily control your discord server.
Stars: ✭ 39 (-45.83%)
Mutual labels: utility
S3reverse
The format of various s3 buckets is convert in one format. for bugbounty and security testing.
Stars: ✭ 61 (-15.28%)
Mutual labels: utility
Microtext.js
A micro JavaScript utility for processing text.
Stars: ✭ 59 (-18.06%)
Mutual labels: utility
Qrcp
⚡ Transfer files over wifi from your computer to your mobile device by scanning a QR code without leaving the terminal.
Stars: ✭ 8,216 (+11311.11%)
Mutual labels: utility
Smoldash
Smoldash, A tiny lodash alternative built for the modern web
Stars: ✭ 66 (-8.33%)
Mutual labels: utility
Postcss Nested Props
PostCSS plugin to unwrap nested properties.
Stars: ✭ 58 (-19.44%)
Mutual labels: props
Str metrics
Ruby gem (native extension in Rust) providing implementations of various string metrics
Stars: ✭ 68 (-5.56%)
Mutual labels: utility
Memorycache
LRU, type-safe, thread-safe memory cache class in Swift
Stars: ✭ 66 (-8.33%)
Mutual labels: utility
Zplutility
ZPL Utility, a .net tool library helping to generate ZPL string
Stars: ✭ 60 (-16.67%)
Mutual labels: utility
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].