https://github.com/daveberning/vue-render-if
Render Vue slots if properties are not undefined, null, empty strings, or a custom value. This helps avoid long and confusing v-ifs just to check if a property is valid.
https://github.com/daveberning/vue-render-if
conditional-rendering es6 javascript props vue
Last synced: about 1 month ago
JSON representation
Render Vue slots if properties are not undefined, null, empty strings, or a custom value. This helps avoid long and confusing v-ifs just to check if a property is valid.
- Host: GitHub
- URL: https://github.com/daveberning/vue-render-if
- Owner: daveberning
- Created: 2018-11-30T18:40:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T02:03:17.000Z (over 3 years ago)
- Last Synced: 2025-03-16T09:08:34.258Z (about 1 year ago)
- Topics: conditional-rendering, es6, javascript, props, vue
- Language: Vue
- Homepage:
- Size: 1.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-render-if
The `vue-render-if` component makes checking against data in your template, easy. This component helps clean up your Vue `template` when checking for multiple "falsey" values of different types.
__Before__
```html
I should only render if every value is not undefined, null, or an empty string.
export default {
data() {
return {
value1: 'Vue.js',
value2: true,
value3: 2018
}
}
}
```
__After__
```html
I should only render if every value is not undefined, null, or an empty string.
import RenderIf from 'vue-render-if';
export default {
components: {
RenderIf,
},
data() {
return {
value1: 'Vue.js',
value2: true,
value3: 2018
}
}
}
```
By default, `vue-render-if` will render a `div` and will check if the values passed in the `defined` props array is either `undefined`, `null`, or an empty string `''`. You can however, define your own invalid values.
__Note:__ You can also pass in a single value if you are checking against one data or state property.
```html
I should only render if every value is not undefined, null, or an empty string.
```
## Options
`vue-render-if` accepts three `props`, one of which is required (`defined`). The other two props are `tag` and `not-valid`.
| Prop Name | Required | Default Value | Accepts | Purpose |
|-----------|----------|---------------|-------------------------------------|------------------------------------------------------------------------------------------|
| defined | yes | N/A | Array (all types) or a single value | List all of the data items that should have a value of some kind for the slot to render. |
| tag | no | 'div' | String | Defines the HTML tag `render-if` should render as. |
| not-valid | no | N/A | Array (all types) or a single value | Defines all of the property values that should be considered invalid. |
```html
I should only render if every value is not undefined, null, or an empty string.
```
This instance will...
- Render if `value1` is not `'foo'`, `'bar'`, `undefined`, `null, or empty.
- Render a `section` tag.
__Note:__ If you defined values for the `not-valid` prop, you will need to add `undefined`, `null`, and `''` if you still want those to be falsy.
## Usage
```bash
$ yarn add vue-render-if
# or
npm install --save vue-render-if
```
### Add it Globally
__main.ts__
```javascript
import RenderIf from 'vue-render-if';
Vue.component('render-if', RenderIf);
```
### Using it in a Vue Component
```html
import RenderIf from 'vue-render-if';
export default {
components: {
RenderIf
}
}
```
## Contributing
1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request!
## Author
__vue-render-if__ © Dave Berning, Released under the MIT License.
[daveberning.io](https://daveberning.io) - [GitHub](https://github.com/daveberning) - [Twitter](https://twitter.com/daveberning)
Special thanks to Cory Kleiser, Lance Deters, and Craig Mullin.