Overview
Specify the DOM element using a selector and designate the attribute name to retrieve.
Supports HTML, BODY, and ID selectors.
If a value other than HTML or BODY is specified, it will be treated as an ID selector. The # symbol is not required.
Returns an Object only when the attribute name "class" is specified. In other cases, returns a String.
| URI | dom-attr://{target}/{attr} |
|---|---|
| Path | Specify the path that follows the prefix registered in nuxt.config.ts. |
| Example | dom-attr://bd-content/class |
Html attrs
vue
<template>
<ViewState
v-slot="theme"
src="dom-attr://html/data-bs-theme"
>
<b-button
v-if="theme.data == 'dark'"
color="primary"
@click="theme.update('light')"
>
Set to [Light]
</b-button>
<b-button
v-else
color="secondary"
@click="theme.update('dark')"
>
Set to [Dark]
</b-button>
</ViewState>
</template>
Body attrs
vue
<template>
<ViewState
v-slot="theme"
src="dom-attr://html/data-bs-theme"
>
<b-button
v-if="theme.data == 'dark'"
color="primary"
@click="theme.update('light')"
>
Set to [Light]
</b-button>
<b-button
v-else
color="secondary"
@click="theme.update('dark')"
>
Set to [Dark]
</b-button>
</ViewState>
</template>
ID class
{}
vue
<template>
<ViewState
v-slot="theme"
src="dom-attr://content/class"
>
{{ theme.data }}
{{ theme.data['text-success'] }}
<b-button
v-if="theme.data['text-success']"
color="primary"
@click="theme.set('text-success', false)"
>
Remove [success]
</b-button>
<b-button
v-else
color="secondary"
@click="theme.set('text-success', true)"
>
Add [success]
</b-button>
</ViewState>
</template>