Vue data attribute (data-*) directive
Vue directive to bind properties as data-* attributes
Abstract
Binding properties as classes is the traditional way to express component state as CSS:
...
This directive allows component state to be expressed instead as data attributes:
...
You can then made additional choices in your CSS to style your components:
Attributes have the same specificity as classes, so it won't affect things like BEM. Additionally, you won't need to think of clever class-naming schemes, the data attribute just expresses what is in the component.
Installation
Install from NPM:
# npm npm i vue-data-attr
# yarn yarn add vue-data-attr
Usage
Setup
Import and use the directive in your main application file:
Vue
Components
Usage is the same as v-bind
- just pass in an object:
<template> <div class="ui-select" v-data="hooks"> ... </div></template> <script>export default { ... computed: { hooks () { return { focused: this.hasFocus, icon: this.icon } } ... } ...}</script>
Output
The directive will cast to string and handle the following data types:
- Strings and Numbers: will output as-is, i.e.
"foo"
or"25"
- Booleans: will be cast to
"0"
,"1"
, or"false"
,"true"
(see Configuration) - Arrays: will be joined with a space, i.e.
['a', 'b']
results in"a b"
- Objects: are filtered by key on truthy values, i.e.
{a: 1, b:0}
results in"a"
- Dates: will have their
toISOString()
called, i.e."2020-04-22T21:27:52.710Z"
Configuration
Global configuration
To configure how the directive renders attributes, pass an object:
Vue
The options are as follows:
empty
Whether to render attributes for undefined
values or empty strings ""
(defaults to false
)
false
- don't render empty attributes i.e.<span />
true
- render empty attributes, i.e.<span data-thing />
bools
Whether to render booleans as text or numbers (defaults to false
)
false
- render booleans as numbers, i.e.<span data-focused="1" />
true
- render booleans as text, i.e.<span data-focused="true" />
name
Register the directive under a different name (defaults to "data"
)
"data-attr"
- register asdata-attr
so use in templates with<span v-data-attr="hooks" />
Local configuration
You can override the empty
and bools
options using the directive's modifiers:
<template> <div class="ui-select" v-data.empty.bools="hooks"> ... </div></template>
Assuming a boolean and empty value from the previous examples, the directive would render:
...