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