is-vue-functional-component-prop-truthy

Checks if a property passed to Vue functional component is truthy

Usage

const isTruthy = require(...)(options);

... = isTruthy(context, propName);

• options

  • isPropsOmitted (false by default)

    Note: in versions before 2.3.0, the props option is required if you wish to accept props in a functional component. In 2.3.0+ you can omit the props option and all attributes found on the component node will be implicitly extracted as props.

    — Vue.js Guide

• context – the component's context

• propName – the property name

Examples

const isTruthy = require(...)();

module.exports = {
	functional: true,
	props: ['prop'],
	render(h, context) {
		const isProp = isTruthy(context, 'prop');
		...
	}
};

const isTruthy = require(...)({isPropsOmitted: true});

module.exports = {
	functional: true,
	render(h, context) {
		const isProp = isTruthy(context, 'prop');
		...
	}
};

Caveats

Code	isPropsOmitted	!isPropsOmitted	!isPropsOmitted, !props.includes('prop')
<component/>	false	false	false
<component prop/>	true	false²	true³
<component prop=""/>	true	false²	true³
<component prop="prop"/>	true	true	true³
<component prop="false"/>	true	true	true³
<component :prop="false"/>	false	false	true³
<component :prop="undefined"/>	false	false	true³
<component :prop="null"/>	false	false	true³
<component :prop="0"/>	false	false	true³
<component :prop="NaN"/>	false	false	true³
<component :prop="''"/>	true¹	false	true³

1. :prop="''" considered the same as prop=""

2. prop="" considered the same as :prop="''"

3. Since prop is not declared as prop, it will be resolved to true as attribute, because of its presence